/* Layout: เว็บคอมมูนิตี้ กิน เที่ยว พัก — พื้นขาวอมมิ้นต์ การ์ดขาวมุมโค้ง แต่ละหมวดมีสีพาสเทลประจำ ใช้ตัวอย่างเว็บจริง (light) */
:root {
  --bg: #fafcfb;
  --surface: #ffffff;
  --ink: #22302c;
  --ink-2: #5e6b67;
  --ink-3: #8a9692;
  --line: #e4ebe8;
  --mint: #29c59d;
  --mint-ink: #178a6c;
  --mint-50: #e8f8f2;
  --mint-100: #cdefe3;
  --peach-50: #fff2e8;
  --peach-100: #ffdcc4;
  --peach-ink: #b4602a;
  --sky-50: #ebf5fc;
  --sky-100: #cfe6f7;
  --sky-ink: #2f6f9e;
  --pink-50: #fdeff3;
  --pink-100: #f8d4df;
  --pink-ink: #b44a6c;
  --gold-50: #fbf6e8;
  --gold-100: #f2e2b3;
  --gold-ink: #8a6a14;
  --lav-50: #f2effb;
  --lav-100: #ddd5f4;
  --lav-ink: #5f4fa3;
  --ad-bg: #f4f6f5;
  --ad-line: #bcc6c2;
  --shadow: 0 1px 2px rgba(34, 48, 44, .04), 0 6px 18px rgba(34, 48, 44, .06);
  --radius: 16px;
  --font-display: "Bai Jamjuree", "IBM Plex Sans Thai", "Noto Sans Thai", system-ui, sans-serif;
  --font-body: "IBM Plex Sans Thai", "Noto Sans Thai", system-ui, sans-serif;
  color-scheme: light;
}
* { box-sizing: border-box; }
body { background: var(--bg); color: var(--ink); font-family: var(--font-body); font-size: 15px; line-height: 1.7; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
h1, h2, h3 { font-family: var(--font-display); line-height: 1.45; text-wrap: balance; margin: 0; }
button { font: inherit; cursor: pointer; }
:focus-visible { outline: 2px solid var(--mint); outline-offset: 2px; border-radius: 8px; }

.wrap { max-width: 1200px; margin: 0 auto; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }

/* ---------- Header ---------- */
.site-header { position: relative; z-index: 2; background: rgba(255, 255, 255, .92); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); }
.site-header .wrap { display: flex; align-items: center; gap: 20px; padding-block: 10px; }
.logo img { height: 40px; width: auto; }
.mainnav { display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; flex: 1; min-width: 0; }
.mainnav a { white-space: nowrap; padding: 6px 12px; border-radius: 999px; font-size: 14px; color: var(--ink-2); }
.mainnav a:hover, .mainnav a.on { background: var(--mint-50); color: var(--mint-ink); }
.head-actions { display: flex; gap: 8px; }
.btn { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); border-radius: 999px; padding: 7px 14px; font-size: 14px; }
.btn.primary { background: var(--mint); border-color: var(--mint); color: #fff; }
.icon { width: 18px; height: 18px; flex: none; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- ทั่วไป ---------- */
main { display: flex; flex-direction: column; gap: 40px; padding-block: 24px 48px; }
.sec-head { display: flex; align-items: flex-end; gap: 12px; margin-bottom: 16px; }
.sec-head h2 { font-size: 26px; }
.sec-head p { margin: 0; color: var(--ink-3); font-size: 14px; }
.sec-head .more { margin-left: auto; font-size: 14px; color: var(--ink-2); white-space: nowrap; }
.sec-head .more:hover { color: var(--mint-ink); }
.eyebrow { font-size: 12px; letter-spacing: .04em; color: var(--mint-ink); font-weight: 600; }
.band { border-radius: 24px; padding: 24px; }
.band.mint { background: var(--mint-50); }
.band.peach { background: var(--peach-50); }
.band.pink { background: var(--pink-50); }
.band.gold { background: var(--gold-50); }
.band.sky { background: var(--sky-50); }
.band.lav { background: var(--lav-50); }
.tag { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; padding: 2px 10px; border-radius: 999px; background: var(--surface); color: var(--ink-2); white-space: nowrap; }

/* ---------- การ์ด ---------- */
.card { display: flex; flex-direction: column; background: var(--surface); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); transition: transform .2s ease, box-shadow .2s ease; min-width: 0; }
.card:hover { transform: translateY(-2px); box-shadow: 0 2px 4px rgba(34, 48, 44, .05), 0 12px 28px rgba(34, 48, 44, .09); }
.media { position: relative; aspect-ratio: 3 / 2; overflow: hidden; background: var(--mint-100); max-width: 100%; }
.media img { width: 100%; height: 100%; object-fit: cover; }
.media .tag { position: absolute; top: 10px; left: 10px; background: rgba(255, 255, 255, .92); }
.card-body { padding: 12px 14px 14px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.card h3 { font-size: 16px; font-weight: 600; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 2.9em; }
.meta { display: flex; justify-content: space-between; gap: 8px; font-size: 12px; color: var(--ink-3); margin-top: auto; font-variant-numeric: tabular-nums; }
.meta span { display: inline-flex; align-items: center; gap: 4px; }
.meta .icon { width: 14px; height: 14px; }

.grid { display: grid; gap: 16px; }
.g3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.g4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* ---------- Hero ---------- */
.hero { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 28px; align-items: center; background: var(--mint-50); border-radius: 28px; padding: 36px; }
.hero h1 { font-size: 40px; line-height: 1.35; }
.hero h1 em { font-style: normal; color: var(--mint-ink); }
.hero p { color: var(--ink-2); margin: 12px 0 20px; max-width: 46ch; }
.search { display: flex; gap: 8px; background: var(--surface); border-radius: 999px; padding: 6px; box-shadow: var(--shadow); }
.search input, .search select { border: 0; background: transparent; font: inherit; color: var(--ink); min-width: 0; padding: 6px 10px; }
.search input { flex: 1; }
.search select { border-left: 1px solid var(--line); color: var(--ink-2); }
.search .btn.primary { padding: 8px 18px; }
.regions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.regions a { font-size: 13px; padding: 4px 12px; border-radius: 999px; background: var(--surface); color: var(--ink-2); border: 1px solid var(--line); }
.regions a:hover { border-color: var(--mint); color: var(--mint-ink); }
.hero-pic { position: relative; }
.hero-pic img { border-radius: 22px; aspect-ratio: 4 / 3; object-fit: cover; width: 100%; }
.hero-note { position: absolute; left: -16px; bottom: 18px; display: flex; gap: 10px; align-items: center; background: var(--surface); border-radius: 14px; padding: 8px 12px 8px 8px; box-shadow: var(--shadow); max-width: 70%; }
.hero-note img { width: 52px; height: 52px; border-radius: 10px; aspect-ratio: 1; }
.hero-note b { display: block; font-size: 13px; line-height: 1.4; }
.hero-note small { color: var(--ink-3); font-size: 12px; }

/* ---------- ไอคอนหมวด ---------- */
.cats { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 12px; }
.cat { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 16px 8px; border-radius: 18px; font-size: 14px; font-weight: 500; text-align: center; transition: transform .2s ease; }
.cat:hover { transform: translateY(-2px); }
.cat .ico { width: 48px; height: 48px; border-radius: 14px; background: var(--surface); display: grid; place-items: center; }
.cat .ico .icon { width: 24px; height: 24px; }
.c-eat { background: var(--peach-50); color: var(--peach-ink); }
.c-cafe { background: var(--pink-50); color: var(--pink-ink); }
.c-travel { background: var(--mint-50); color: var(--mint-ink); }
.c-stay { background: var(--sky-50); color: var(--sky-ink); }
.c-mu { background: var(--gold-50); color: var(--gold-ink); }
.c-life { background: var(--lav-50); color: var(--lav-ink); }
.c-auto { background: #eef1f4; color: #47566a; }
.c-deal { background: #fff6dc; color: #8a6a14; }

/* ---------- วิดีโอ 9:16 ---------- */
.vrow { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; }
.vcard { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.vthumb { position: relative; aspect-ratio: 9 / 16; border-radius: 18px; overflow: hidden; background: #2a2f2d; max-width: 100%; }
.vthumb img { width: 100%; height: 100%; object-fit: cover; }
.vthumb::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 55%, rgba(0, 0, 0, .55)); }
.play { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 52px; height: 52px; border-radius: 50%; background: rgba(255, 255, 255, .92); display: grid; place-items: center; z-index: 2; }
.play::before { content: ""; margin-left: 4px; border-left: 16px solid var(--pink-ink); border-top: 10px solid transparent; border-bottom: 10px solid transparent; }
.vthumb .src, .vthumb .time { position: absolute; z-index: 2; font-size: 11px; color: #fff; }
.vthumb .src { top: 10px; left: 10px; background: rgba(0, 0, 0, .45); border-radius: 999px; padding: 1px 8px; }
.vthumb .time { bottom: 10px; right: 10px; background: rgba(0, 0, 0, .5); border-radius: 6px; padding: 0 6px; }
.vthumb .views { position: absolute; z-index: 2; bottom: 10px; left: 10px; color: #fff; font-size: 12px; }
.vcard h3 { font-size: 14px; font-weight: 600; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* ---------- พื้นที่โฆษณา ---------- */
.ad { display: grid; place-items: center; text-align: center; border: 1.5px dashed var(--ad-line); border-radius: 16px; background: var(--ad-bg); color: var(--ink-3); font-size: 13px; padding: 16px; min-height: 110px; }
.ad b { display: block; color: var(--ink-2); font-size: 14px; }

/* ---------- ล่าสุด + เพจของเรา ---------- */
.latest { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 24px; align-items: stretch; }
.page-card { display: flex; flex-direction: column; gap: 12px; background: var(--surface); border-radius: var(--radius); box-shadow: var(--shadow); padding: 16px; }
.page-top { display: flex; gap: 12px; align-items: center; }
.page-top img { width: 52px; height: 52px; border-radius: 14px; border: 1px solid var(--line); object-fit: contain; background: #fff; }
.page-top b { display: block; font-family: var(--font-display); font-size: 17px; }
.page-top small { color: var(--ink-3); }
.page-clip { position: relative; flex: 1; min-height: 240px; border-radius: 14px; overflow: hidden; }
.page-clip img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.page-clip::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(0, 0, 0, .05) 45%, rgba(0, 0, 0, .6)); }
.page-clip .tag { position: absolute; top: 10px; left: 10px; z-index: 2; color: var(--pink-ink); }
.page-clip p { position: absolute; left: 12px; right: 12px; bottom: 10px; z-index: 2; margin: 0; color: #fff; font-size: 14px; line-height: 1.6; }
.socials { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.socials a { text-align: center; border-radius: 999px; padding: 6px 0; font-size: 13px; }
.s-fb { background: #e6eefb; color: #2b5aa6; }
.s-yt { background: #fde6e6; color: #b23a3a; }
.s-tt { background: #eef0f2; color: #22302c; }
.s-ig { background: #fbe8f2; color: #a8457a; }

/* ---------- การ์ดใหญ่ + เล็ก ---------- */
.feature { display: grid; grid-template-columns: calc(50% + 62px) minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: 1fr 1fr; gap: 16px; }
.feature > .big { grid-row: 1 / 3; }
.feature .card:not(.big) .media { aspect-ratio: auto; flex: 1; min-height: 0; }
.big h3 { font-size: 20px; }
.temple { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: 16px; }
.list { display: flex; flex-direction: column; gap: 12px; }
.list .card { flex: 1 1 0; min-height: 0; flex-direction: row; align-items: center; gap: 12px; padding: 8px; }
.list .media { width: 40%; flex: none; border-radius: 12px; }
.list .card-body { padding: 0 6px 0 0; }
.list h3 { font-size: 15px; }

/* ---------- ภาค ---------- */
.chips { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 16px; }
.chips button { border: 1px solid transparent; background: var(--surface); color: var(--ink-2); border-radius: 999px; padding: 5px 14px; font-size: 14px; }
.chips button[aria-pressed="true"] { background: var(--mint); color: #fff; }

/* ---------- Affiliate ---------- */
.deals { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.deal { display: flex; gap: 12px; align-items: center; background: var(--surface); border-radius: 14px; padding: 14px; box-shadow: var(--shadow); min-width: 0; }
.deal .ico { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; flex: none; }
.deal b { display: block; font-size: 15px; }
.deal small { color: var(--ink-3); font-size: 12px; }
.disclose { font-size: 12px; color: var(--ink-3); margin: 12px 0 0; }

/* ---------- หมวดใหม่ (ตัวอย่าง) ---------- */
.duo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.mini { display: flex; flex-direction: column; gap: 10px; }
.mini a { display: flex; gap: 12px; align-items: center; background: var(--surface); border-radius: 14px; padding: 10px; box-shadow: var(--shadow); }
.mini .ph { width: 92px; aspect-ratio: 3 / 2; border-radius: 10px; flex: none; display: grid; place-items: center; }
.mini b { font-size: 15px; font-weight: 600; display: block; line-height: 1.5; }
.mini small { color: var(--ink-3); font-size: 12px; }

/* ---------- Footer ---------- */
footer { background: var(--surface); border-top: 1px solid var(--line); }
footer .wrap { display: grid; grid-template-columns: 1.4fr repeat(3, minmax(0, 1fr)); gap: 24px; padding-block: 32px; font-size: 14px; color: var(--ink-2); }
footer h4 { font-family: var(--font-display); color: var(--ink); margin: 0 0 8px; font-size: 15px; }
footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
footer .copy { grid-column: 1 / -1; border-top: 1px solid var(--line); padding-top: 16px; font-size: 13px; color: var(--ink-3); }

/* ---------- หน้าบทความ ---------- */
.crumb { font-size: 13px; color: var(--ink-3); display: flex; gap: 6px; flex-wrap: wrap; }
.crumb a:hover { color: var(--mint-ink); }
.art { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 32px; align-items: start; }
.art-main { display: flex; flex-direction: column; gap: 20px; min-width: 0; }
.art-main h1 { font-size: 34px; }
.art-sub { color: var(--ink-2); font-size: 17px; margin: 0; }
.byline { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 13px; color: var(--ink-3); align-items: center; }
.byline .who { display: flex; align-items: center; gap: 8px; color: var(--ink-2); }
.byline .who img { width: 28px; height: 28px; border-radius: 50%; border: 1px solid var(--line); object-fit: contain; background: #fff; }
.seg { display: inline-flex; background: var(--mint-50); border-radius: 999px; padding: 4px; gap: 4px; align-self: flex-start; }
.seg button { border: 0; background: transparent; border-radius: 999px; padding: 4px 14px; font-size: 13px; color: var(--ink-2); }
.seg button[aria-pressed="true"] { background: var(--surface); color: var(--mint-ink); box-shadow: var(--shadow); }
.hero-media img { border-radius: 20px; aspect-ratio: 3 / 2; object-fit: cover; width: 100%; }
.hero-video { display: grid; place-items: center; background: var(--pink-50); border-radius: 20px; padding: 20px; }
.hero-video .vthumb { width: min(320px, 100%); }
.hero-media figcaption, figure figcaption { font-size: 13px; color: var(--ink-3); margin-top: 8px; text-align: center; }
figure { margin: 0; }
.quick { background: var(--mint-50); border-radius: 18px; padding: 18px 20px; }
.quick h2 { font-size: 18px; margin-bottom: 6px; }
.quick ul { margin: 0; padding-left: 20px; display: grid; gap: 4px; }
.toc { border: 1px solid var(--line); border-radius: 16px; padding: 12px 18px; background: var(--surface); }
.toc summary { font-family: var(--font-display); font-weight: 600; cursor: pointer; }
.toc ol { margin: 8px 0 0; padding-left: 20px; color: var(--ink-2); display: grid; gap: 2px; }
.prose { display: flex; flex-direction: column; gap: 14px; }
.prose h2 { font-size: 24px; margin-top: 12px; }
.prose p { margin: 0; line-height: 1.85; }
.prose figure img { border-radius: 16px; aspect-ratio: 3 / 2; object-fit: cover; width: 100%; }
.dish { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.dish div { background: var(--peach-50); border-radius: 14px; padding: 12px 14px; }
.dish b { display: block; font-family: var(--font-display); }
.dish small { color: var(--ink-2); }
.shop { background: var(--peach-50); border-radius: 18px; padding: 16px; }
.shop-head { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; flex-wrap: wrap; }
.shop-head b { font-family: var(--font-display); }
.shop-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.prod { background: var(--surface); border-radius: 12px; overflow: hidden; font-size: 13px; }
.prod .ph { aspect-ratio: 3 / 2; background: var(--peach-100); display: grid; place-items: center; color: var(--peach-ink); font-size: 12px; }
.prod div:last-child { padding: 8px 10px; display: flex; justify-content: space-between; gap: 6px; }
.prod span { color: #ee4d2d; white-space: nowrap; }
.side { display: flex; flex-direction: column; gap: 16px; }
.place { background: var(--surface); border-radius: 18px; box-shadow: var(--shadow); overflow: hidden; }
.map { position: relative; aspect-ratio: 4 / 3; background:
  linear-gradient(90deg, rgba(41, 197, 157, .14) 1px, transparent 1px) 0 0 / 28px 28px,
  linear-gradient(rgba(41, 197, 157, .14) 1px, transparent 1px) 0 0 / 28px 28px,
  linear-gradient(160deg, #e8f8f2, #eaf4fc); }
.map::before { content: ""; position: absolute; left: 8%; right: 30%; top: 58%; height: 10px; border-radius: 10px; background: #fff; transform: rotate(-12deg); }
.map::after { content: ""; position: absolute; left: 55%; top: 10%; bottom: 0; width: 10px; border-radius: 10px; background: #fff; transform: rotate(18deg); }
.pin { position: absolute; left: 50%; top: 42%; transform: translate(-50%, -100%); z-index: 2; display: flex; flex-direction: column; align-items: center; }
.pin span { background: var(--surface); border-radius: 999px; padding: 2px 10px; font-size: 12px; box-shadow: var(--shadow); white-space: nowrap; }
.pin i { width: 18px; height: 18px; border-radius: 50% 50% 50% 0; background: var(--mint); transform: rotate(-45deg); margin-top: 4px; border: 3px solid #fff; }
.map .open { position: absolute; right: 10px; bottom: 10px; z-index: 2; }
.place-body { padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 10px; }
.place-body h3 { font-size: 18px; }
.place-body dl { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 6px 12px; font-size: 14px; }
.place-body dt { color: var(--ink-3); }
.place-body dd { margin: 0; }
.place-body .btn { justify-content: center; }
.trip { background: var(--mint-50); border-radius: 18px; padding: 16px; }
.trip h3 { font-size: 17px; margin-bottom: 2px; }
.trip p { margin: 0 0 10px; font-size: 13px; color: var(--ink-2); }
.trip a { display: flex; align-items: center; gap: 10px; background: var(--surface); border-radius: 12px; padding: 10px 12px; margin-top: 8px; font-size: 14px; }
.trip a small { display: block; color: var(--ink-3); font-size: 12px; }
.trip .icon { color: var(--mint-ink); width: 22px; height: 22px; }
.faq details { border-bottom: 1px solid var(--line); padding: 12px 0; }
.faq summary { font-weight: 600; cursor: pointer; }
.faq p { margin: 8px 0 0; color: var(--ink-2); }
.tags { display: flex; flex-wrap: wrap; gap: 8px; }
.tags a { font-size: 13px; padding: 3px 12px; border-radius: 999px; background: var(--mint-50); color: var(--mint-ink); }

/* ---------- มือถือ / แท็บเล็ต ---------- */
@media (max-width: 1080px) {
  .cats { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .vrow { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 6px; }
  .vcard { flex: 0 0 30%; scroll-snap-align: start; }
  .latest, .art { grid-template-columns: minmax(0, 1fr); }
  .side { position: static; }
  .deals { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 820px) {
  .hero { grid-template-columns: minmax(0, 1fr); padding: 24px; }
  .hero h1 { font-size: 30px; }
  .hero-note { left: 10px; }
  .g4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .g3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .feature, .temple, .duo { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; }
  .feature > .big { grid-row: auto; }
  .feature .card:not(.big) .media { aspect-ratio: 3 / 2; flex: none; }
  .list .card { flex: none; }
  .head-actions .btn:not(.primary) { display: none; }
  footer .wrap { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .art-main h1 { font-size: 28px; }
}
@media (max-width: 560px) {
  .band { padding: 16px; border-radius: 20px; }
  .sec-head h2 { font-size: 22px; }
  .sec-head p { display: none; }
  .g3, .g4, .deals { grid-template-columns: minmax(0, 1fr); }
  .vcard { flex-basis: 44%; }
  .search { flex-wrap: wrap; border-radius: 18px; }
  .search select { border-left: 0; border-top: 1px solid var(--line); flex: 1; }
  .dish, .shop-row { grid-template-columns: minmax(0, 1fr); }
  .mainnav { display: none; }
  .logo { margin-right: auto; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }

/* ---------- รอบ 2: ข่าวเด่น / ภาค / กิน / โฆษณาหลายขนาด / Affiliate ---------- */
.hero-pic img { height: auto; }
.lead { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); margin-bottom: 16px; }
.lead .media { aspect-ratio: 3 / 2; }
.lead .card-body { padding: 20px 22px; gap: 10px; justify-content: center; }
.lead h3 { font-size: 22px; -webkit-line-clamp: 3; min-height: 0; }
.lead p { margin: 0; color: var(--ink-2); font-size: 14px; }
.news-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.news-list .card { flex-direction: row; align-items: center; gap: 12px; padding: 8px; }
.news-list .media { width: 40%; flex: none; border-radius: 12px; }
.news-list .media .tag { display: none; }
.news-list .card-body { padding: 0 6px 0 0; }
.news-list h3 { font-size: 15px; }
.side-col { display: flex; flex-direction: column; }
.side-col .page-card { flex: 1; }
.side-col .ad { margin-top: 16px; }
.regions-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.region { position: relative; aspect-ratio: 4 / 3; border-radius: 18px; overflow: hidden; display: block; max-width: 100%; box-shadow: var(--shadow); }
.region img, .region-ph { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .3s ease; }
.region-ph { background: linear-gradient(140deg, var(--lav-100), var(--sky-100)); }
.region::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 40%, rgba(0, 0, 0, .6)); }
.region:hover img { transform: scale(1.04); }
.region-txt { position: absolute; left: 14px; right: 14px; bottom: 12px; z-index: 2; color: #fff; display: flex; flex-direction: column; }
.region-txt b { font-family: var(--font-display); font-size: 20px; }
.region-txt small { font-size: 12px; opacity: .9; }
.temple.rev { grid-template-columns: minmax(0, 1fr) minmax(0, 1.55fr); }
.temple.rev > .big { order: 2; }
.temple.rev > .list { order: 1; }
.ad-lb { min-height: 100px; }
.ad-rect { min-height: 250px; }
.ad-center { max-width: 360px; margin: 0 auto; width: 100%; min-height: 280px; }
.ad-half { min-height: 600px; }
.ad-fluid { min-height: 140px; }
.ad-native { display: flex; flex-direction: column; justify-content: flex-start; align-items: stretch; gap: 10px; padding: 0 0 14px; overflow: hidden; text-align: left; }
.ad-native .ad-media { aspect-ratio: 3 / 2; background: repeating-linear-gradient(135deg, #eef1f0 0 12px, #e5eae8 12px 24px); }
.ad-native > span:last-child { padding: 0 14px; }
.ad-multi { display: flex; flex-direction: column; gap: 12px; min-height: 0; padding: 18px; }
.ad-multi .mx { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; width: 100%; }
.ad-multi .mx i { aspect-ratio: 3 / 2; border-radius: 10px; background: repeating-linear-gradient(135deg, #eef1f0 0 12px, #e5eae8 12px 24px); }
.aff-btn { align-self: flex-start; font-size: 12px; background: var(--mint); color: #fff; border-radius: 999px; padding: 3px 12px; }
.sub-h { font-size: 18px; margin: 20px 0 12px; }
.products { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; }
.prod-card { background: var(--surface); border-radius: 14px; overflow: hidden; box-shadow: var(--shadow); display: flex; flex-direction: column; min-width: 0; }
.prod-ph { aspect-ratio: 1; background: var(--peach-50); display: grid; place-items: center; color: var(--peach-ink); font-size: 12px; }
.prod-body { padding: 10px; display: flex; flex-direction: column; gap: 6px; font-size: 13px; }
.prod-body b { font-weight: 500; line-height: 1.5; }
.mk { align-self: flex-start; font-size: 11px; border-radius: 6px; padding: 0 6px; color: #fff; }
.mk.shopee { background: #ee4d2d; }
.mk.lazada { background: #1a1aa6; }
.prod-cta { font-size: 12px; color: var(--mint-ink); font-weight: 600; }
.prod span.lz { color: #1a1aa6; }
@media (max-width: 1080px) {
  .products { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ad-half { min-height: 250px; }
}
@media (max-width: 820px) {
  .lead { grid-template-columns: minmax(0, 1fr); }
  .regions-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .temple.rev { grid-template-columns: minmax(0, 1fr); }
  .temple.rev > .big { order: 0; }
  .ad-multi .mx { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .news-list { grid-template-columns: minmax(0, 1fr); }
  .products { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .region-txt b { font-size: 17px; }
}

.lotto { background: var(--gold-50); border-radius: 22px; padding: 18px 22px; display: flex; flex-direction: column; gap: 12px; }
.lotto-head { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.lotto-head h2 { font-size: 20px; }
.lotto-head span { font-size: 13px; color: var(--ink-3); }
.lotto-row { display: grid; grid-template-columns: 1.4fr repeat(3, minmax(0, 1fr)) auto; gap: 12px; align-items: stretch; }
.lotto-row > div { background: var(--surface); border-radius: 14px; padding: 10px 14px; display: flex; flex-direction: column; box-shadow: var(--shadow); }
.lotto-row small { font-size: 12px; color: var(--ink-3); }
.lotto-row b { font-family: var(--font-display); font-size: 22px; letter-spacing: .06em; font-variant-numeric: tabular-nums; }
.lotto-main b { font-size: 30px; color: var(--gold-ink); }
.lotto-row .btn { align-self: center; justify-content: center; }
@media (max-width: 820px) {
  .lotto-row { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .lotto-main { grid-column: 1 / -1; }
  .lotto-row .btn { grid-column: 1 / -1; }
}

.lotto-check { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 8px 16px; align-items: center; background: var(--surface); border-radius: 14px; padding: 12px 14px; box-shadow: var(--shadow); }
.lotto-label { font-family: var(--font-display); font-weight: 600; display: flex; flex-direction: column; line-height: 1.4; }
.lotto-label small { font-family: var(--font-body); font-weight: 400; font-size: 12px; color: var(--ink-3); }
.lotto-input { display: flex; gap: 8px; }
.lotto-input input { flex: 1; min-width: 0; border: 1px solid var(--line); border-radius: 999px; padding: 8px 16px; font: inherit; font-size: 18px; letter-spacing: .2em; font-variant-numeric: tabular-nums; color: var(--ink); background: var(--bg); }
.lotto-input input:focus { outline: 2px solid var(--mint); outline-offset: 1px; }
.lotto-result { grid-column: 1 / -1; margin: 0; font-size: 14px; }
.lotto-result:empty { display: none; }
.lotto-result.win { color: var(--mint-ink); font-weight: 600; }
.lotto-result.miss { color: var(--ink-2); }
.lotto-result.warn { color: var(--peach-ink); }
@media (max-width: 820px) {
  .lotto-check { grid-template-columns: minmax(0, 1fr); }
}
.lotto-row b { white-space: nowrap; }
/* ---------- รูปเห็นเต็ม ไม่โดนตัด: สัดส่วนไม่ตรงกรอบ → วางเต็มรูป + พื้นหลังรูปเดียวกันแบบเบลอ ---------- */
.hero-media img, .prose figure img { height: auto; aspect-ratio: auto; }
.fit { position: relative; overflow: hidden; }
.fit::before { content: ""; position: absolute; inset: -24px; background: var(--bg-img) center / cover no-repeat; filter: blur(16px) brightness(.92); }
.fit > img { position: relative; object-fit: contain !important; }
.media .tag, .media .play { z-index: 2; }
.page-clip.fit > img { position: absolute; }
.region.fit > img { position: absolute; }
.region.fit::before { z-index: 0; }
.region.fit > img, .region.fit .region-txt { z-index: 1; }
.region.fit .region-txt { z-index: 2; }
/* ไทล์ภาค: ตัวหนังสืออยู่ใต้รูป ไม่ทับรูป (ผู้ใช้ติ 6 พ.ย. 2026) */
.region { aspect-ratio: auto; display: flex; flex-direction: column; background: var(--surface); }
.region::after { content: none; }
.region img, .region-ph { position: static; inset: auto; width: 100%; height: auto; aspect-ratio: 3 / 2; display: block; }
.region-txt { position: static; color: var(--ink); padding: 10px 14px 12px; gap: 2px; }
.region-txt b { font-size: 18px; }
.region-txt small { color: var(--ink-3); opacity: 1; }
@media (max-width: 820px) {
  .hero-pic img { aspect-ratio: 5 / 2; }
  .hero-note { position: static; max-width: 100%; margin-top: 10px; box-shadow: none; border: 1px solid var(--line); }
}
@media (max-width: 560px) {
  .lotto-row > div:not(.lotto-main) b { font-size: 17px; letter-spacing: .02em; }
  .lotto-row > div { padding: 8px 10px; }
}

/* ---------- คอลัมน์ขวาหน้าบทความ: เติมให้เต็ม ---------- */
.side-box { background: var(--surface); border-radius: 18px; box-shadow: var(--shadow); padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 10px; }
.side-box h3 { font-size: 17px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.side-note { margin: -6px 0 0; font-size: 12px; color: var(--ink-3); }
.mini-list { display: flex; flex-direction: column; gap: 10px; }
.mini-row { display: flex; gap: 10px; align-items: center; }
.mini-row img, .ph-sq { width: 84px; aspect-ratio: 3 / 2; border-radius: 10px; object-fit: cover; flex: none; }
.ph-sq { background: var(--sky-100); display: grid; place-items: center; font-size: 11px; color: var(--sky-ink); }
.mini-row b { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 14px; font-weight: 600; line-height: 1.5; }
.mini-row small { display: block; font-size: 12px; color: var(--ink-3); }
.mini-row > span:nth-child(2) { flex: 1; min-width: 0; }
.mini-row .aff-btn { flex: none; }
.rank { margin: 0; padding: 0; list-style: none; counter-reset: r; display: flex; flex-direction: column; gap: 8px; }
.rank li { counter-increment: r; display: flex; gap: 10px; align-items: flex-start; }
.rank li::before { content: counter(r); flex: none; width: 26px; height: 26px; border-radius: 8px; background: var(--mint-50); color: var(--mint-ink); font-weight: 700; display: grid; place-items: center; font-size: 13px; }
.rank a { display: flex; flex-direction: column; min-width: 0; }
.rank b { font-size: 14px; font-weight: 600; line-height: 1.5; }
.rank small { font-size: 12px; color: var(--ink-3); display: inline-flex; gap: 4px; align-items: center; }
.rank .icon { width: 13px; height: 13px; }

/* ---------- หน้าบ้านจริง (เพิ่มจาก mockup) ---------- */
footer .f-h { font-family: var(--font-display); color: var(--ink); margin: 0 0 8px; font-size: 15px; line-height: 1.5; }
footer a:hover, .crumb a:hover, .tags a:hover { color: var(--mint-ink); }
.ad-slot { display: block; width: 100%; overflow: hidden; min-height: 90px; padding: 0; border: 0; background: none; }
/* จองพื้นที่เล็ก ๆ (≤100px) — โฆษณาจริงขยายเอง; ไม่มีโฆษณา → JS ซ่อนทั้งกล่อง */
.ad-slot.ad-loaded { min-height: 0; }
.ad-slot.ad-empty, .sticky.ad-empty { display: none !important; }
.tags span { font-size: 13px; padding: 3px 12px; border-radius: 999px; background: var(--mint-50); color: var(--mint-ink); }
.map .map-frame { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; z-index: 3; }
.map.loaded::before, .map.loaded::after { content: none; }
.place-body dd a { color: var(--mint-ink); word-break: break-word; }
.dish img { border-radius: 10px; margin-bottom: 8px; aspect-ratio: 3 / 2; object-fit: cover; width: 100%; height: auto; }
.prose { overflow-wrap: anywhere; }
.prose figure { margin: 10px 0; }
.prose figure img { border-radius: 16px; max-width: 100%; height: auto; margin: 0 auto; }
.prose h3 { font-size: 19px; margin-top: 8px; }
.prose ul, .prose ol { margin: 0; padding-left: 22px; line-height: 1.8; }
.prose a { color: var(--mint-ink); text-decoration: underline; }
.prose table { width: 100%; border-collapse: collapse; display: block; overflow-x: auto; }
.prose td, .prose th { border: 1px solid var(--line); padding: 6px 10px; }
.toc a:hover { color: var(--mint-ink); }
.toc .sub { padding-left: 14px; list-style: circle; }
.quick p { margin: 0; }
.author { display: flex; gap: 14px; align-items: flex-start; background: var(--surface); border-radius: 18px; box-shadow: var(--shadow); padding: 16px; }
.author img { width: 56px; height: 56px; border-radius: 50%; border: 1px solid var(--line); object-fit: contain; background: #fff; flex: none; }
.author b { font-family: var(--font-display); font-size: 16px; display: block; line-height: 1.5; }
.author small { color: var(--ink-3); font-size: 13px; }
.author p { margin: 6px 0 0; font-size: 14px; color: var(--ink-2); }
.list-head { display: flex; flex-direction: column; gap: 8px; background: var(--mint-50); border-radius: 24px; padding: 24px; }
.list-head h1 { font-size: 32px; line-height: 1.5; }
.list-head p { margin: 0; color: var(--ink-2); max-width: 70ch; }
.list-head .count { color: var(--ink-3); font-size: 14px; }
.pager { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }
.pager a, .pager span { min-width: 40px; text-align: center; padding: 6px 12px; border-radius: 999px; background: var(--surface); border: 1px solid var(--line); font-size: 14px; }
.pager [aria-current] { background: var(--mint); border-color: var(--mint); color: #fff; }
.empty { text-align: center; color: var(--ink-3); padding: 40px 0; }
.nf { text-align: center; padding: 48px 0; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.nf h1 { font-size: 32px; }
.hero h1 { line-height: 1.5; }
.art > .side { align-self: stretch; }
.side .sticky { position: sticky; top: 16px; }
.vthumb.noimg { background: linear-gradient(160deg, var(--pink-100), var(--lav-100)); }
@media (max-width: 1080px) { .side .sticky { position: static; } }
@media (max-width: 820px) { .list-head h1 { font-size: 26px; } }
@media (max-width: 560px) {
  .site-header .wrap { flex-wrap: wrap; row-gap: 6px; }
  .mainnav { display: flex; order: 3; flex: 0 0 100%; }
  .logo { margin-right: auto; }
  .list-head { padding: 18px; border-radius: 20px; }
}
[hidden] { display: none !important; }
.prose figure { text-align: center; }
.prose figure img { width: auto; max-width: 100%; max-height: 640px; display: inline-block; }
@media (max-width: 560px) { .prose figure img { max-height: 520px; } }
.grid + .grid, .grid + .ad-slot, .ad-slot + .grid, .grid + .ad, .ad + .grid { margin-top: 16px; }

/* ไทล์ภาคที่ยังไม่มีรูป (เช่น ต่างประเทศ): พื้นพาสเทล + ไอคอน */
.region-ph { display: grid; place-items: center; background: radial-gradient(circle at 25% 25%, var(--sky-100), transparent 55%), radial-gradient(circle at 80% 75%, var(--pink-100), transparent 55%), linear-gradient(140deg, var(--lav-50), var(--mint-50)); color: var(--sky-ink); }
.region-ph .icon { width: 56px; height: 56px; stroke-width: 1.4; opacity: .85; }