/* =====================================================================
   เมืองช้าง — หน้าบ้าน "Provincial Daily" (ไม่มี framework / jQuery)
   กริดหนังสือพิมพ์ · masthead กรมท่า · Prompt (หัวข่าว) + Sarabun (เนื้อหา)
   ต้นแบบดีไซน์: docs/design/home-mockup.html · เปลี่ยนสีทั้งเว็บที่ :root
   ===================================================================== */
/* ฟอนต์: WOFF2 subset ไทย+อังกฤษ (~16–20KB/ไฟล์) — สร้างใหม่: bash scripts/subset-fonts.sh */
@font-face { font-family: 'Prompt'; font-weight: 500; src: url('../fonts/Prompt-Medium.woff2') format('woff2'), url('../fonts/Prompt-Medium.ttf') format('truetype'); font-display: swap; }
@font-face { font-family: 'Prompt'; font-weight: 600; src: url('../fonts/Prompt-SemiBold.woff2') format('woff2'), url('../fonts/Prompt-SemiBold.ttf') format('truetype'); font-display: swap; }
@font-face { font-family: 'Prompt'; font-weight: 700; src: url('../fonts/Prompt-Bold.woff2') format('woff2'), url('../fonts/Prompt-Bold.ttf') format('truetype'); font-display: swap; }
@font-face { font-family: 'Sarabun'; font-weight: 400; src: url('../fonts/Sarabun-Regular.woff2') format('woff2'), url('../fonts/Sarabun-Regular.ttf') format('truetype'); font-display: swap; }
@font-face { font-family: 'Sarabun'; font-weight: 600; src: url('../fonts/Sarabun-SemiBold.woff2') format('woff2'), url('../fonts/Sarabun-SemiBold.ttf') format('truetype'); font-display: swap; }

:root {
  --brand: #1D5FD1;          /* น้ำเงิน — ปุ่ม/เส้นเน้น/แท็บที่เลือก */
  --brand-ink: #FFFFFF;      /* ตัวอักษรบนพื้น brand */
  --brand-text: #1A54BA;     /* น้ำเงินสำหรับตัวอักษรบนพื้นขาว (AA) */
  --band: #0B1F3F;           /* กรมท่า: masthead / ข่าวรอบอำเภอ / footer */
  --band-ink: #8DBBFF;       /* ฟ้าอ่อน: ตัวอักษรรองบนพื้นกรมท่า */
  --brand-soft: #EEF3FB;     /* พื้นฟ้าอ่อน: แถบล่าสุด / เที่ยวสุรินทร์ / กล่องแจ้ง */
  --brand-soft-line: #B9CFF5;
  --red: #D7263D;            /* ป้ายล่าสุด/LIVE */
  --ink: #111827;
  --ink-2: #374151;
  --muted: #6B7280;
  --line: #E3E8F0;
  --rule: #0B1F3F;           /* เส้นหนาหัวส่วนแบบหนังสือพิมพ์ */
  --paper: #FFFFFF;
  --bg: #F4F6FA;
  --head: 'Prompt', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --body: 'Sarabun', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --radius: 6px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--body); font-size: 17px; line-height: 1.65; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; height: auto; }
h1, h2, h3, h4 { font-family: var(--head); font-weight: 600; line-height: 1.4; }
button { font-family: inherit; }
.wrap { max-width: 1240px; margin: 0 auto; padding: 0 20px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
main { min-height: 50vh; }

/* ----- ชิ้นส่วนพื้นฐาน ----- */
.t { font-family: var(--head); font-weight: 600; line-height: 1.4; margin: 0; transition: color .15s; }
a:hover .t, a.t:hover, .t a:hover { color: var(--brand-text); }
.meta { display: block; color: var(--muted); font-size: 13px; line-height: 1.5; }
.kicker { display: inline-block; font-family: var(--head); font-weight: 600; font-size: 13px; line-height: 1.6; color: var(--brand-text); }
.kicker.amp::before { content: '📍'; margin-right: 3px; font-size: 11px; }
a.kicker:hover { text-decoration: underline; }
.ph { display: block; width: 100%; aspect-ratio: 1200 / 630; object-fit: cover; background: var(--line); }
.ph-link { display: block; overflow: hidden; }
.ph-link .ph { transition: transform .35s ease; }
.ph-link:hover .ph { transform: scale(1.03); }
.ex { margin: 0; color: var(--ink-2); font-size: 15.5px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.pill { display: inline-flex; align-items: center; justify-content: center; gap: 6px; font-family: var(--head); font-weight: 600; font-size: 15px; background: var(--brand); color: var(--brand-ink);
  border: 1px solid var(--brand); border-radius: 999px; padding: 0 18px; height: 42px; white-space: nowrap; cursor: pointer; }
.pill:hover { background: #2A6EE6; border-color: #2A6EE6; }
.pill.ghost { background: transparent; border-color: rgba(255,255,255,.32); color: #fff; }
.pill.ghost:hover { background: rgba(255,255,255,.1); }
.pill.alt { background: #fff; color: var(--band); border-color: var(--band); }
.pill.alt:hover { background: var(--brand-soft); }
/* ปุ่มเดิม (ฟอร์ม/หวย/คุกกี้ใช้ class btn) */
.btn { display: inline-block; font-family: var(--head); font-weight: 600; background: var(--brand); color: var(--brand-ink); padding: 9px 20px; border-radius: 999px; white-space: nowrap; border: 0; cursor: pointer; font-size: 15px; }
.btn:hover { background: #2A6EE6; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chips a { border: 1px solid var(--line); border-radius: 999px; padding: 3px 12px; font-size: 14px; background: var(--paper); }
.chips a:hover { border-color: var(--brand); color: var(--brand-text); }

/* ----- 1. แถบบนสุด ----- */
.util { border-bottom: 1px solid var(--line); font-size: 13.5px; color: var(--muted); }
.util .wrap { display: flex; align-items: center; gap: 18px; height: 34px; }
.util-date { color: var(--ink-2); font-weight: 600; }
.util-links { margin-left: auto; display: flex; gap: 16px; }
.util-links a:hover { color: var(--brand-text); }

/* ----- 2. Masthead ----- */
.mast { background: var(--band); color: #fff; }
.mast .wrap { display: flex; align-items: center; gap: 22px; height: 88px; }
.mast-logo { flex: none; display: flex; }
.mast-logo img { display: block; height: 44px; width: auto; }   /* โลโก้สัดส่วน 5.48:1 (logo-white.svg) */
.mast-tag { font-family: var(--head); font-size: 13px; line-height: 1.45; color: var(--band-ink); padding-left: 22px; border-left: 1px solid rgba(255,255,255,.18); }
.mast-tag b { display: block; color: #fff; font-weight: 600; font-size: 15px; }
.mast-actions { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.mast-search { display: flex; align-items: center; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.16); border-radius: 999px; padding: 0 6px 0 16px; height: 42px; width: 270px; }
.mast-search:focus-within { border-color: var(--band-ink); background: rgba(255,255,255,.12); }
.mast-search input { flex: 1; min-width: 0; border: 0; background: transparent; color: #fff; font: inherit; font-size: 15px; outline: 0; }
.mast-search input::placeholder { color: rgba(255,255,255,.55); }
.mast-search button { border: 0; background: transparent; color: #fff; width: 32px; height: 32px; cursor: pointer; display: grid; place-items: center; }
.menu-toggle { display: none; width: 42px; height: 42px; border: 0; border-radius: 50%; background: rgba(255,255,255,.1); color: #fff; cursor: pointer; place-items: center; }

/* ----- 3. เมนูหลัก ----- */
.nav { position: sticky; top: 0; z-index: 20; background: #fff; border-bottom: 1px solid var(--line); box-shadow: 0 1px 0 rgba(11,31,63,.04); }
.nav .wrap { display: flex; align-items: stretch; height: 54px; }
.nav-link { display: flex; align-items: center; padding: 0 13px; font-family: var(--head); font-weight: 600; font-size: 16px; color: var(--ink-2); white-space: nowrap; position: relative; }
.nav-link:hover, .nav-item:hover > .nav-link, .nav-item:focus-within > .nav-link, .nav-item.open > .nav-link { color: var(--brand-text); }
.nav-link.on, .nav-item.on > .nav-link { color: var(--band); }
.nav-link.on::after, .nav-item.on > .nav-link::after { content: ''; position: absolute; left: 13px; right: 13px; bottom: 0; height: 3px; background: var(--brand); border-radius: 3px 3px 0 0; }
.nav-item.on > .nav-link::after { right: 4px; }
.nav-item { position: relative; display: flex; align-items: stretch; }
.nav-item > .nav-link { padding-right: 4px; }
.nav-item.amp > .nav-link { color: var(--brand-text); }
.nav-item.amp > .nav-link::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--brand); margin-right: 8px; }
.sub-toggle { border: 0; background: transparent; cursor: pointer; padding: 0 10px 0 4px; font-size: 12px; color: var(--muted); }
.nav-lotto { margin-left: auto; color: var(--muted); font-weight: 500; }
.dropdown { display: none; position: absolute; top: 100%; left: 0; z-index: 30; min-width: 220px; background: var(--paper); color: var(--ink);
  border: 1px solid var(--line); border-top: 3px solid var(--brand); border-radius: 0 0 10px 10px; box-shadow: 0 14px 30px rgba(11,31,63,.14); padding: 8px; }
.dropdown.cols2, .dropdown.cols3 { grid-template-columns: repeat(2, minmax(160px, 1fr)); min-width: 360px; column-gap: 4px; }
.dropdown.cols3 { grid-template-columns: repeat(3, minmax(130px, 1fr)); min-width: 440px; }
.nav-item:hover .dropdown, .nav-item:focus-within .dropdown, .nav-item.open .dropdown { display: block; }
.nav-item:hover .dropdown.cols2, .nav-item:focus-within .dropdown.cols2, .nav-item.open .dropdown.cols2,
.nav-item:hover .dropdown.cols3, .nav-item:focus-within .dropdown.cols3, .nav-item.open .dropdown.cols3 { display: grid; }
.dropdown a { display: block; padding: 8px 12px; border-radius: 6px; font-family: var(--head); font-weight: 500; font-size: 15px; white-space: nowrap; }
.dropdown a:hover, .dropdown a.on { background: var(--brand-soft); color: var(--brand-text); }
.dropdown a.all { grid-column: 1 / -1; border-top: 1px solid var(--line); margin-top: 4px; padding-top: 10px; color: var(--brand-text); font-size: 14px; }

/* ----- 4. แถบ "ล่าสุด" ----- */
.flash { background: var(--brand-soft); border-bottom: 1px solid var(--line); }
.flash .wrap { display: flex; align-items: center; gap: 14px; height: 46px; }
.flash-lbl { flex: none; display: inline-flex; align-items: center; gap: 7px; font-family: var(--head); font-weight: 700; font-size: 14px; color: var(--red); }
.flash-lbl::before { content: ''; width: 9px; height: 9px; border-radius: 50%; background: var(--red); box-shadow: 0 0 0 4px rgba(215,38,61,.15); }
.flash-items { flex: 1; min-width: 0; display: grid; }
.flash-item { grid-area: 1 / 1; display: flex; align-items: baseline; gap: 12px; min-width: 0; opacity: 0; visibility: hidden; transform: translateY(6px); transition: opacity .3s, transform .3s, visibility .3s; }
.flash-item.on { opacity: 1; visibility: visible; transform: none; }
.flash-h { font-family: var(--head); font-weight: 500; font-size: 15.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.flash-item:hover .flash-h { color: var(--brand-text); }
.flash-time { flex: none; color: var(--muted); font-size: 13px; }
.flash-btns { flex: none; display: flex; gap: 4px; }
.flash-btns button { width: 28px; height: 28px; border-radius: 50%; border: 1px solid var(--line); background: #fff; cursor: pointer; color: var(--ink-2); line-height: 1; }
.flash-btns button:hover { border-color: var(--brand); color: var(--brand-text); }
@media (prefers-reduced-motion: reduce) { .flash-item { transition: none; transform: none; } }

/* ----- เมนูมือถือเต็มจอ ----- */
html.drawer-open, html.drawer-open body { overflow: hidden; }
.drawer { position: fixed; inset: 0; z-index: 100; background: var(--bg); overflow-y: auto; overscroll-behavior: contain; }
.drawer[hidden] { display: none; }
.drawer-bar { position: sticky; top: 0; z-index: 1; display: grid; grid-template-columns: 56px 1fr 56px; align-items: center; height: 60px; background: var(--band); color: #fff; }
.drawer-bar button { border: 0; background: transparent; color: inherit; cursor: pointer; height: 60px; font-size: 22px; }
.drawer-logo { justify-self: center; display: flex; }
.drawer-logo img { display: block; height: 26px; width: auto; }
.drawer-search { display: flex; gap: 8px; padding: 12px 16px; background: var(--paper); border-bottom: 1px solid var(--line); }
.drawer-search input { flex: 1; min-width: 0; font: inherit; font-size: 16px; padding: 0 14px; height: 42px; border: 1px solid var(--line); border-radius: 999px; outline-color: var(--brand); }
.drawer-amp { padding: 14px 16px 16px; background: var(--paper); border-bottom: 1px solid var(--line); }
.drawer-amp b { display: block; font-family: var(--head); font-weight: 700; color: var(--band); margin-bottom: 8px; }
.drawer-amp div { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.drawer-amp a { padding: 7px 8px; border-radius: 8px; background: var(--brand-soft); font-family: var(--head); font-weight: 500; font-size: 14px; text-align: center; }
.drawer-menu { list-style: none; margin: 8px 0 0; padding: 0; background: var(--paper); }
.drawer-menu > li { border-bottom: 1px solid var(--line); }
.drawer-link, .drawer-menu summary { display: flex; align-items: center; gap: 8px; padding: 15px 22px; font-family: var(--head); font-weight: 600; font-size: 17px; cursor: pointer; list-style: none; }
.drawer-menu summary::-webkit-details-marker { display: none; }
.drawer-menu summary::after { content: '+'; margin-left: auto; font-size: 22px; font-weight: 500; line-height: 1; color: var(--muted); }
.drawer-menu details[open] > summary::after { content: '−'; }
.drawer-sub { padding: 0 0 8px; }
.drawer-sub a { display: block; padding: 10px 22px 10px 38px; font-size: 16px; border-top: 1px solid var(--line); }
.drawer-sub a:first-child { font-weight: 600; color: var(--brand-text); }
.drawer-sub a.on { background: var(--brand-soft); box-shadow: inset 4px 0 0 var(--brand); }

/* ----- หัวส่วนแบบหนังสือพิมพ์ (เส้นหนาด้านบน) ----- */
.sec { margin-top: 44px; }
.block { margin: 36px 0 0; }
.sec-head { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 14px; border-top: 3px solid var(--rule); padding-top: 10px; margin-bottom: 18px; }
.sec-head h2, .sec-head h1 { font-size: 23px; font-weight: 700; color: var(--band); margin: 0; }
.sec-head h2 a:hover { color: var(--brand-text); }
.sec-head .sub { font-size: 14px; color: var(--muted); }
.sec-head .more { margin-left: auto; font-family: var(--head); font-weight: 500; font-size: 14px; color: var(--brand-text); white-space: nowrap; }
.sec-head .more:hover { text-decoration: underline; }
.layout { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 40px; align-items: start; margin-top: 28px; }
.side, .sidebar { display: grid; gap: 28px; align-content: start; }
.side-h { font-size: 18px; font-weight: 700; color: var(--band); border-top: 3px solid var(--rule); padding-top: 10px; margin: 0 0 8px; }
.box { background: var(--paper); border: 1px solid var(--line); border-radius: 10px; padding: 16px 18px; }
.box .sec-head { border-top: 0; padding-top: 0; margin-bottom: 10px; }
.box .sec-head h2 { font-size: 19px; }
.empty { border: 1px dashed var(--line); border-radius: 10px; padding: 40px 16px; text-align: center; color: var(--muted); }
.ads-box { text-align: center; overflow: hidden; }
.ads-box img { display: inline-block; }

/* ----- 5. กริดข่าวนำ 3 คอลัมน์ ----- */
.lead-grid { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 3fr) minmax(0, 3fr); margin-top: 26px; }
.lead-grid > * { padding: 0 22px; }
.lead-grid > :first-child { padding-left: 0; }
.lead-grid > :last-child { padding-right: 0; }
.lead-grid > * + * { border-left: 1px solid var(--line); }
.lead-main .ph-link { margin-bottom: 14px; }
.lead-h { font-size: 31px; font-weight: 700; line-height: 1.35; margin: 4px 0 10px; color: var(--band); }
.lead-h a:hover { color: var(--brand-text); }
.lead-ex { margin: 0 0 8px; color: var(--ink-2); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.lead-stack article { padding-bottom: 16px; margin-bottom: 16px; border-bottom: 1px solid var(--line); }
.lead-stack article:last-child { border-bottom: 0; margin-bottom: 0; padding-bottom: 0; }
.lead-stack .ph-link { margin-bottom: 10px; }
.lead-stack .t { font-size: 18px; margin: 2px 0 4px; }
.tl-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.tl-head h2 { font-size: 18px; font-weight: 700; color: var(--band); margin: 0; }
.tl-head span { font-family: var(--head); font-size: 11.5px; font-weight: 700; color: #fff; background: var(--red); border-radius: 4px; padding: 1px 8px; letter-spacing: .5px; }
.timeline { list-style: none; margin: 0; padding: 0; position: relative; }
.timeline::before { content: ''; position: absolute; left: 46px; top: 6px; bottom: 6px; width: 2px; background: var(--line); }
.timeline li { display: grid; grid-template-columns: 46px minmax(0, 1fr); gap: 0 18px; padding: 0 0 14px; position: relative; }
.timeline li::before { content: ''; position: absolute; left: 42px; top: 8px; width: 10px; height: 10px; border-radius: 50%; background: #fff; border: 2px solid var(--brand); }
.timeline time { font-family: var(--head); font-weight: 600; font-size: 13px; color: var(--brand-text); padding-top: 1px; line-height: 1.5; }
.timeline time small { display: block; font-family: var(--body); font-weight: 400; font-size: 11px; color: var(--muted); }
.timeline .t { display: block; font-size: 15.5px; font-weight: 500; }
.timeline .meta { margin-top: 2px; }
.tl-more { display: block; text-align: center; margin-top: 4px; padding: 8px; border: 1px solid var(--line); border-radius: 999px; font-family: var(--head); font-weight: 500; font-size: 14px; color: var(--brand-text); }
.tl-more:hover { border-color: var(--brand); }

/* ----- 6. ข่าวรอบ 17 อำเภอ ----- */
.amphoe-band { background: var(--band); color: #fff; margin-top: 52px; padding: 36px 0 40px; }
.amphoe-band .sec-head { border-top-color: var(--band-ink); }
.amphoe-band .sec-head h2 { color: #fff; }
.amphoe-band .sec-head .sub, .amphoe-band .sec-head .more { color: var(--band-ink); }
.amp-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 34px; }
.amp-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; align-content: start; }
.amp-tiles button { display: flex; flex-direction: column; justify-content: space-between; align-items: flex-start; text-align: left; min-height: 62px; padding: 9px 12px;
  border-radius: 8px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1); color: #fff; cursor: pointer;
  font-family: var(--head); font-weight: 600; font-size: 15px; line-height: 1.3; transition: background .15s; }
.amp-tiles small { font-family: var(--body); font-weight: 400; font-size: 12px; color: var(--band-ink); }
.amp-tiles button:hover { background: rgba(255,255,255,.12); }
.amp-tiles button.none { color: rgba(255,255,255,.6); }
.amp-tiles button.on { background: var(--brand); border-color: var(--brand); color: #fff; }
.amp-tiles button.on small { color: #DCE8FF; }
.amp-tiles button:focus-visible { outline: 2px solid var(--band-ink); outline-offset: 2px; }
.amp-panel[hidden] { display: none; }
.amp-panel h3 { font-size: 20px; font-weight: 700; margin: 0 0 14px; }
.amp-panel h3 small { font-family: var(--body); font-weight: 400; font-size: 14px; color: var(--band-ink); margin-left: 8px; }
.amp-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 24px; }
.amp-list .ph { border-radius: 6px; margin-bottom: 10px; }
.amp-list .t { display: block; font-size: 16.5px; }
.amp-list a:hover .t { color: var(--band-ink); }
.amp-list .meta { color: rgba(255,255,255,.6); }
.amp-empty { color: rgba(255,255,255,.75); }
.amp-empty a, .amp-all { color: var(--band-ink); }
.amp-all { display: inline-block; margin-top: 18px; font-family: var(--head); font-weight: 500; font-size: 14.5px; }
.amp-all:hover, .amp-empty a:hover { text-decoration: underline; }

/* ----- 7. หมวดคู่ + แถวการ์ด + sidebar หน้าแรก ----- */
.body-grid { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 40px; }
.pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 36px; }
.cat-first .ph-link { margin-bottom: 10px; }
.cat-first .t { font-size: 19px; margin: 2px 0 6px; }
.cat-list { list-style: none; margin: 14px 0 0; padding: 0; }
.cat-list li { padding: 11px 0; border-top: 1px solid var(--line); }
.cat-list .t { display: block; font-size: 16px; font-weight: 500; }
.cat-list .meta { margin-top: 2px; }
.row4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px; }
.row4.cols-auto { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); }
.card .ph-link { border-radius: 4px; margin-bottom: 10px; }
.card .t { font-size: 16px; margin: 2px 0 4px; }
.row4.boxed .card { background: #fff; border-radius: 10px; overflow: hidden; box-shadow: 0 1px 2px rgba(11,31,63,.06); }
.row4.boxed .card .ph-link { border-radius: 0; margin: 0; }
.row4.boxed .card-in { padding: 12px 14px 16px; }
.rank { list-style: none; margin: 0; padding: 0; counter-reset: n; }
.rank li { counter-increment: n; display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 4px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.rank li::before { content: counter(n); font-family: var(--head); font-weight: 700; font-size: 30px; line-height: 1; color: transparent; -webkit-text-stroke: 1.5px var(--brand); }
.rank li:nth-child(-n+3)::before { color: var(--brand); -webkit-text-stroke: 0; }
.rank .t { font-size: 15.5px; font-weight: 500; }
.lotto-card { background: var(--brand-soft); border-radius: 12px; padding: 16px 18px; }
.lotto-card .side-h { border: 0; padding: 0; margin-bottom: 2px; }
.lotto-num { font-family: var(--head); font-weight: 700; font-size: 36px; letter-spacing: 4px; color: var(--band); font-variant-numeric: tabular-nums; }
.lotto-row { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 13.5px; color: var(--ink-2); }
.lotto-row b { display: block; font-family: var(--head); font-size: 17px; color: var(--band); font-variant-numeric: tabular-nums; }
.lotto-card > a { display: inline-block; margin-top: 10px; font-family: var(--head); font-weight: 600; font-size: 14px; color: var(--brand-text); }
.lotto-card > a:hover { text-decoration: underline; }

/* ----- 8. เที่ยวสุรินทร์ ----- */
.travel-band { background: var(--brand-soft); margin-top: 52px; padding: 36px 0 44px; }

/* ----- 9. เสียงคนสุรินทร์ ----- */
.voice { margin-top: 52px; }
.voice-card { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 24px; align-items: center; border: 2px solid var(--band); border-radius: 14px; padding: 26px 30px; background: linear-gradient(90deg, #fff 55%, var(--brand-soft)); }
.voice-card h2 { font-size: 24px; font-weight: 700; color: var(--band); margin: 0; }
.voice-card p { margin: 4px 0 0; color: var(--ink-2); }
.voice-list { margin: 12px 0 0; padding-left: 20px; font-size: 15.5px; }
.voice-list a:hover { color: var(--brand-text); text-decoration: underline; }
.voice-btns { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; justify-content: flex-end; }
.voice-more { flex-basis: 100%; text-align: right; font-family: var(--head); font-size: 14px; color: var(--brand-text); }

/* ----- หน้ารายการ (หมวด/อำเภอ/แท็ก/ค้นหา) ----- */
.page-head { background: var(--brand-soft); border-bottom: 1px solid var(--line); padding: 22px 0 20px; }
.page-head h1 { font-size: 32px; font-weight: 700; color: var(--band); margin: 2px 0 6px; }
.page-head p { margin: 0; color: var(--ink-2); max-width: 780px; }
.page-kicker { display: block; font-family: var(--head); font-weight: 600; font-size: 13.5px; color: var(--brand-text); margin-top: 8px; }
.crumb { font-size: 14px; color: var(--muted); }
.crumb a { color: var(--brand-text); }
.crumb a:hover { text-decoration: underline; }
.subnav { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.subnav a { border: 1px solid var(--line); border-radius: 999px; padding: 4px 14px; font-size: 14px; font-family: var(--head); font-weight: 500; background: var(--paper); }
.subnav a:hover { border-color: var(--brand); color: var(--brand-text); }
.subnav a.on { background: var(--brand); border-color: var(--brand); color: var(--brand-ink); }
.page-search { display: flex; gap: 8px; margin-top: 14px; max-width: 520px; }
.page-search input { flex: 1; min-width: 0; font: inherit; font-size: 16px; padding: 0 16px; height: 42px; border: 1px solid var(--line); border-radius: 999px; outline-color: var(--brand); }
.list { display: grid; }
.list .item { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 20px; padding: 18px 0; border-bottom: 1px solid var(--line); }
.list .item:first-child { padding-top: 0; }
.list .item .ph-link { border-radius: 4px; }
.item-kick { display: flex; flex-wrap: wrap; gap: 2px 12px; }
.list .item .t { font-size: 20px; margin: 2px 0 6px; }
.list .item .ex { margin-bottom: 6px; }
.excerpt { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.pager { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; margin: 28px 0 8px; padding: 0; list-style: none; }
.pager a, .pager span { display: inline-block; min-width: 40px; text-align: center; padding: 7px 12px; border: 1px solid var(--line); border-radius: 999px; background: var(--paper); font-family: var(--head); }
.pager a:hover { border-color: var(--brand); color: var(--brand-text); }
.pager .on { background: var(--brand); border-color: var(--brand); color: var(--brand-ink); font-weight: 600; }
.pager .off { color: #BBB; }
/* หน้ารวม 17 อำเภอ */
.amp-index { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px; }
.amp-card { border: 1px solid var(--line); border-radius: 12px; overflow: hidden; display: flex; flex-direction: column; }
.amp-card-h { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; padding: 12px 14px; background: var(--band); color: #fff; }
.amp-card-h h2 { margin: 0; font-size: 18px; font-weight: 700; }
.amp-card-h small { color: var(--band-ink); font-size: 12.5px; white-space: nowrap; }
.amp-card-h:hover h2 { color: var(--band-ink); }
.amp-card-n { display: block; padding: 0 0 12px; }
.amp-card-n .ph { margin-bottom: 8px; }
.amp-card-n .t { display: block; padding: 0 14px; font-size: 15px; font-weight: 500; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.amp-card-empty { padding: 14px; font-size: 14px; color: var(--muted); }
.amp-card-empty:hover { color: var(--brand-text); }
/* หน้ารวมข่าวจังหวัด (77 จังหวัด) */
.regions { display: grid; gap: 18px; }
.province-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.province-grid a { display: flex; justify-content: space-between; align-items: center; gap: 6px; padding: 8px 12px; border: 1px solid var(--line); border-radius: var(--radius); font-size: 15px; }
.province-grid a:hover { border-color: var(--brand); color: var(--brand-text); }
.province-grid small { color: var(--muted); font-size: 12px; }

/* ----- หน้าข่าว ----- */
.article { padding-top: 4px; min-width: 0; }
.art-kick { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 14px; }
.article h1 { font-size: 36px; font-weight: 700; line-height: 1.35; color: var(--band); margin: 6px 0 12px; }
.deck { font-size: 19.5px; line-height: 1.7; color: var(--ink-2); margin: 0 0 18px; }
.byline { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; padding: 14px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); margin-bottom: 22px; }
.by-avatar { width: 42px; height: 42px; border-radius: 50%; background: var(--band); color: #fff; display: grid; place-items: center; font-family: var(--head); font-weight: 700; font-size: 18px; flex: none; }
.by-txt { display: grid; line-height: 1.45; font-size: 14px; color: var(--muted); }
.by-txt b { font-family: var(--head); font-weight: 600; font-size: 15.5px; color: var(--ink); }
.by-tools { margin-left: auto; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.share { display: flex; gap: 6px; }
.share a, .share button { height: 36px; min-width: 36px; padding: 0 10px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700; color: #fff; border: 0; cursor: pointer; font-family: var(--head); }
.share .fb { background: #1877F2; } .share .line { background: #06C755; } .share .x { background: #000; } .share .copy { background: var(--muted); }
.fontsize { display: inline-flex; border: 1px solid var(--line); border-radius: 999px; overflow: hidden; }
.fontsize button { border: 0; background: var(--paper); padding: 6px 11px; cursor: pointer; font-family: var(--head); }
.fontsize button + button { border-left: 1px solid var(--line); }
.cover { margin: 0 0 24px; }
.cover img { display: block; width: 100%; aspect-ratio: 1200 / 630; object-fit: cover; background: var(--line); border-radius: 4px; }
.lead { font-size: 20px; font-weight: 600; border-left: 4px solid var(--brand); padding-left: 14px; margin: 0 0 18px; }
.body { --fs: 18.5px; font-size: var(--fs); line-height: 1.85; overflow-wrap: anywhere; max-width: 760px; }
.body p { margin: 0 0 18px; }
.body h2, .body h3 { margin: 30px 0 12px; color: var(--band); }
.body img { display: block; margin: 6px auto; border-radius: 4px; height: auto; }
.body figure { margin: 18px 0; }
.body figcaption { font-size: 14px; color: var(--muted); text-align: center; margin-top: 4px; }
.body blockquote { margin: 22px 0; padding: 12px 20px; border-left: 4px solid var(--brand); background: var(--brand-soft); border-radius: 0 8px 8px 0; font-style: normal; }
.body a { color: var(--brand-text); text-decoration: underline; }
.body iframe, .body video, .body embed { max-width: 100%; }
.body iframe[src*="youtube"], .body iframe[src*="youtu.be"] { width: 100%; height: auto; aspect-ratio: 16 / 9; }
.body table { width: 100%; border-collapse: collapse; display: block; overflow-x: auto; font-size: .9em; }
.body td, .body th { border: 1px solid var(--line); padding: 6px 10px; }
.tags { display: flex; flex-wrap: wrap; gap: 8px; margin: 26px 0; align-items: center; }
.tags b { font-family: var(--head); margin-right: 4px; }
.tags a, .tag-cloud a { border: 1px solid var(--line); border-radius: 999px; padding: 3px 12px; font-size: 14px; }
.tags a:hover, .tag-cloud a:hover { border-color: var(--brand); color: var(--brand-text); }
.tag-cloud { display: flex; flex-wrap: wrap; gap: 8px; }
.tip-box { display: flex; align-items: center; gap: 16px; margin: 26px 0 0; padding: 16px 20px; border-radius: 12px; background: var(--brand-soft); border: 1px solid var(--brand-soft-line); }
.tip-box b { display: block; font-family: var(--head); font-weight: 700; color: var(--band); font-size: 17px; }
.tip-box span { font-size: 14.5px; color: var(--ink-2); }
.tip-box .pill { margin-left: auto; flex: none; }
.related-list { margin: 0; padding-left: 20px; }
.related-list li { margin: 6px 0; }
.related-list a:hover { color: var(--brand-text); }
.preview-bar { margin: 14px 0 0; padding: 10px 14px; border-radius: var(--radius); background: var(--brand-soft); border: 1px dashed var(--brand-text); font-size: 14px; }
.preview-bar b { font-family: var(--head); margin-right: 6px; }

/* ----- หน้าเพจ (นโยบาย/ติดต่อ) ----- */
.prose { line-height: 1.85; overflow-wrap: anywhere; max-width: 800px; }
.prose h1, .prose h2, .prose h3 { margin: 24px 0 10px; color: var(--band); }
.prose h2:first-child { margin-top: 0; }
.prose a { color: var(--brand-text); text-decoration: underline; }

/* ----- คอลัมนิสต์ ----- */
.avatar { width: 88px; height: 88px; border-radius: 50%; object-fit: cover; background: var(--line); border: 3px solid var(--brand); flex: none; }
.profile-head { display: flex; align-items: center; gap: 18px; margin-top: 8px; }
.profile-head h1 { margin-top: 0; }
.columnist-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 16px; }
.columnist-card { display: grid; justify-items: center; text-align: center; gap: 6px; background: var(--paper); border: 1px solid var(--line); border-radius: 12px; padding: 20px 14px; }
.columnist-card:hover { border-color: var(--brand); }
.columnist-card .t { font-size: 17px; }
.columnist-card p { margin: 0; font-size: 14px; color: var(--ink-2); }
.author-box { display: flex; gap: 14px; align-items: center; background: var(--paper); border: 1px solid var(--line); border-left: 4px solid var(--brand); border-radius: 10px; padding: 14px 16px; margin: 24px 0; }
.author-box .avatar { width: 64px; height: 64px; border-width: 2px; }
.author-box b { font-family: var(--head); font-size: 17px; }
.author-box p { margin: 2px 0 0; font-size: 14px; color: var(--ink-2); }
.op { display: block; background: var(--paper); border: 1px solid var(--line); border-top: 4px solid var(--brand); border-radius: 10px; padding: 18px; }
.op .t { font-size: 18px; margin-top: 4px; }
.grid4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.grid3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.row { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 12px; align-items: start; }
.row .ph { border-radius: 4px; }
.row .t { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; font-size: 15px; }
.row .kicker { font-size: 12.5px; }

/* ----- ฟอร์มส่งเรื่อง (ร้องทุกข์/ส่งข่าว) ----- */
.form-card { background: var(--paper); border: 1px solid var(--line); border-top: 4px solid var(--brand); border-radius: 12px; padding: 22px 24px; }
.form-tip { margin: 0 0 18px; padding: 12px 14px; background: var(--brand-soft); border-radius: var(--radius); font-size: 15px; color: #444; }
.alert-ok { margin: 0 0 18px; padding: 14px 16px; border-radius: var(--radius); background: #E8F6EC; border: 1px solid #9BD3AB; color: #14532D; font-weight: 600; }
.alert-err { margin: 0 0 18px; padding: 10px 16px; border-radius: var(--radius); background: #FDECEC; border: 1px solid #F3B4B4; color: #8A1C1C; font-size: 14px; }
.alert-err ul { margin: 0; padding-left: 18px; }
.sub-form { display: grid; gap: 16px; }
.f-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.f { display: grid; gap: 6px; }
.f > span { font-family: var(--head); font-weight: 500; font-size: 15px; }
.f b { color: #C0392B; font-weight: 600; }
.f input, .f select, .f textarea { width: 100%; font: inherit; font-size: 16px; padding: 10px 12px; border: 1px solid #CDD5E0; border-radius: var(--radius); background: #fff; color: var(--ink); }
.f textarea { resize: vertical; min-height: 140px; }
.f input:focus, .f select:focus, .f textarea:focus { outline: 2px solid var(--brand); outline-offset: 0; border-color: var(--brand); }
.f [aria-invalid="true"] { border-color: #C0392B; background: #FFF8F8; }
.f-note { margin: -6px 0 0; font-size: 13px; color: var(--muted); }
.f-note a, .link { color: var(--brand-text); text-decoration: underline; }
.hp { position: absolute; left: -5000px; width: 1px; height: 1px; overflow: hidden; }
.upload { display: grid; gap: 2px; justify-items: center; text-align: center; padding: 18px 12px; border: 2px dashed #CDD5E0; border-radius: 8px; cursor: pointer; position: relative; color: #555; }
.upload:hover { border-color: var(--brand); background: var(--brand-soft); }
.upload input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.upload small { color: var(--muted); font-size: 12.5px; }
.file-list { display: flex; flex-wrap: wrap; gap: 6px; }
.file-list span { background: var(--brand-soft); border-radius: 14px; padding: 2px 10px; font-size: 13px; }
.captcha { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.captcha img { display: block; border-radius: var(--radius); height: 44px; width: auto; }
.captcha button { width: 44px; height: 44px; border: 1px solid #CDD5E0; border-radius: var(--radius); background: #fff; font-size: 20px; cursor: pointer; }
.captcha input { width: 130px; }
.btn-submit { justify-self: start; font-size: 17px; padding: 12px 36px; }
.btn-submit:disabled { opacity: .6; cursor: wait; }
.steps { margin: 0; padding-left: 20px; display: grid; gap: 8px; font-size: 15px; }
.steps a { color: var(--brand-text); text-decoration: underline; }

/* ----- แบนเนอร์คุกกี้ (PDPA) ----- */
.mcc { position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 90; max-width: 960px; margin: 0 auto; display: flex; align-items: center; gap: 12px 16px;
  padding: 12px 16px; background: var(--band); color: #fff; border-radius: 10px; border-top: 3px solid var(--brand); box-shadow: 0 6px 28px rgba(0,0,0,.28); font-size: 14px; line-height: 1.55; }
.mcc[hidden], .mcc-modal[hidden] { display: none; }
.mcc p { margin: 0; flex: 1; }
.mcc a { color: var(--band-ink); text-decoration: underline; }
.mcc-btns { display: flex; gap: 8px; flex: none; }
.mcc-btn { border: 0; border-radius: var(--radius); padding: 8px 18px; font-family: var(--head); font-weight: 600; font-size: 15px; cursor: pointer; white-space: nowrap; background: var(--brand); color: var(--brand-ink); }
.mcc-ghost { background: rgba(255,255,255,.12); color: #fff; }
.mcc-modal { position: fixed; inset: 0; z-index: 110; background: rgba(0,0,0,.55); display: flex; align-items: center; justify-content: center; padding: 16px; }
.mcc-box { background: var(--paper); color: var(--ink); border-radius: 10px; border-top: 4px solid var(--brand); max-width: 520px; width: 100%; max-height: 90vh; overflow: auto; padding: 20px 22px; font-size: 14.5px; line-height: 1.6; }
.mcc-box h2 { font-size: 20px; margin: 0 0 6px; }
.mcc-box p { margin: 0 0 6px; color: #555; }
.mcc-row { display: flex; gap: 12px; align-items: flex-start; border-top: 1px solid var(--line); padding: 12px 0; cursor: pointer; }
.mcc-row span { flex: 1; }
.mcc-row strong { display: block; font-family: var(--head); font-weight: 600; font-size: 15.5px; }
.mcc-row small { color: var(--muted); font-size: 13px; }
.mcc-row input { width: 20px; height: 20px; margin-top: 3px; accent-color: var(--brand-text); }
.mcc-box .mcc-ghost { background: var(--bg); color: var(--ink); }
.mcc-actions { display: flex; gap: 8px; justify-content: flex-end; flex-wrap: wrap; margin-top: 10px; }


/* ----- Footer ----- */
.foot { margin-top: 64px; border-top: 6px solid var(--brand); background: var(--band); color: #C9D6EA; font-size: 15px; }
.foot-top { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 36px; padding: 40px 0 30px; }
.foot-top img { display: block; height: 36px; width: auto; margin-bottom: 12px; }
.foot-top p { margin: 0; }
.foot h4 { font-size: 16px; font-weight: 600; color: #fff; margin: 0 0 10px; }
.foot ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.foot a:hover { color: #fff; }
.foot-amp { display: flex; flex-wrap: wrap; gap: 6px 14px; padding: 18px 0; border-top: 1px solid rgba(255,255,255,.1); font-size: 14px; }
.foot-amp b { color: #fff; font-family: var(--head); font-weight: 600; margin-right: 6px; }
.foot-bottom { display: flex; justify-content: space-between; gap: 16px; padding: 16px 0 22px; border-top: 1px solid rgba(255,255,255,.1); font-size: 13px; color: #8EA3C4; }

/* ----- แท็บเล็ต ----- */
@media (max-width: 1024px) {
  .mast-tag { display: none; }
  .mast-search { width: 220px; }
  .lead-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .lead-grid > .lead-tl { grid-column: 1 / -1; border-left: 0; padding: 22px 0 0; margin-top: 22px; border-top: 1px solid var(--line); }
  .lead-grid > .lead-stack { padding-right: 0; }
  .body-grid, .layout { grid-template-columns: minmax(0, 1fr); }
  .amp-grid { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .amp-tiles { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .foot-top { grid-template-columns: 1fr 1fr; }
  .grid4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid3 { grid-template-columns: minmax(0, 1fr); }
  /* เมนู: แถบหมวดเลื่อนซ้ายขวา — หมวดย่อยอยู่ในเมนู ☰ */
  .menu-toggle { display: grid; }
  .nav .wrap { overflow-x: auto; scrollbar-width: none; padding: 0 8px; }
  .nav .wrap::-webkit-scrollbar { display: none; }
  .sub-toggle, .nav .dropdown { display: none !important; }
  .nav-item > .nav-link { padding-right: 13px; }
  .nav-item.on > .nav-link::after { right: 13px; }
}

/* ----- โทรศัพท์ ----- */
@media (max-width: 720px) {
  body { font-size: 16px; }
  .wrap { padding: 0 16px; }
  .util { display: none; }
  .mast .wrap { height: 60px; gap: 10px; }
  .mast-logo img { height: 30px; }
  .mast-search, .mast-actions .pill.ghost { display: none; }
  .mast-actions .pill { height: 36px; padding: 0 14px; font-size: 14px; }
  .menu-toggle { width: 38px; height: 38px; }
  .nav .wrap { height: 46px; padding: 0 4px; }
  .nav-link { font-size: 15px; padding: 0 11px; }
  .nav-item > .nav-link { padding-right: 11px; }
  .nav-link.on::after, .nav-item.on > .nav-link::after { left: 11px; right: 11px; }
  .nav-lotto { display: none; }
  .flash .wrap { height: auto; padding-top: 9px; padding-bottom: 9px; align-items: flex-start; }
  .flash-item { display: block; }
  .flash-h { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; font-size: 15px; line-height: 1.45; }
  .flash-time, .flash-btns { display: none; }
  .sec { margin-top: 34px; }
  .sec-head h2, .sec-head h1 { font-size: 21px; }
  .sec-head .sub { display: none; }
  .layout { margin-top: 20px; gap: 32px; }

  /* ข่าวนำ: รูปชนขอบจอ · ข่าวรองเป็นแถว (รูปขวา) · ไทม์ไลน์ต่อท้าย */
  .lead-grid { grid-template-columns: minmax(0, 1fr); margin-top: 0; }
  .lead-grid > * { padding: 0 !important; border-left: 0 !important; }
  .lead-main { margin: 0 -16px; }
  .lead-main .ph-link { margin-bottom: 12px; }
  .lead-txt { padding: 0 16px; }
  .lead-h { font-size: 24px; }
  .lead-grid > .lead-stack { margin-top: 20px; padding-top: 18px !important; border-top: 1px solid var(--line); }
  .lead-stack article { display: grid; grid-template-columns: minmax(0, 1fr) 120px; gap: 12px; align-items: start; }
  .lead-stack article > .ph-link { order: 2; margin: 0; border-radius: 4px; }
  .lead-stack .t { font-size: 16px; }

  /* อำเภอ: ปุ่มเลื่อนซ้ายขวา 2 แถว · ข่าวเป็นแถว */
  .amphoe-band { margin-top: 36px; padding: 28px 0 32px; }
  .amp-tiles { grid-auto-flow: column; grid-template-columns: none; grid-template-rows: repeat(2, auto); grid-auto-columns: 124px; overflow-x: auto; margin: 0 -16px; padding: 0 16px 6px; scrollbar-width: none; }
  .amp-tiles::-webkit-scrollbar { display: none; }
  .amp-list { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .amp-list a { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 12px; align-items: start; }
  .amp-list .ph { margin: 0; }
  .amp-list .t { font-size: 15.5px; }

  .pair { grid-template-columns: minmax(0, 1fr); }
  .pair > * + * { margin-top: 34px; }
  .row4 { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 72%; overflow-x: auto; margin: 0 -16px; padding: 0 16px 8px; scroll-snap-type: x mandatory; scrollbar-width: none; gap: 14px; }
  .row4::-webkit-scrollbar { display: none; }
  .row4 > * { scroll-snap-align: start; }
  .row4.cols-auto { grid-template-columns: none; }
  .travel-band { margin-top: 36px; padding: 28px 0 32px; }
  .voice-card { grid-template-columns: minmax(0, 1fr); padding: 20px; }
  .voice-card h2 { font-size: 20px; }
  .voice-btns { justify-content: flex-start; }
  .voice-more { text-align: left; }

  /* รายการข่าว: รูปซ้าย 40% · ข่าวแรกรูปเต็ม */
  .page-head { padding: 16px 0 14px; }
  .page-head h1 { font-size: 25px; }
  .page-head p { font-size: 15px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
  .subnav { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin: 12px -16px 0; padding: 0 16px 2px; }
  .subnav::-webkit-scrollbar { display: none; }
  .subnav a { white-space: nowrap; flex: none; }
  .list .item { grid-template-columns: 40% minmax(0, 1fr); gap: 12px; padding: 14px 0; }
  .list .item .t { font-size: 15.5px; margin: 0 0 4px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
  .list .item .ex { display: none; }
  .list .item:first-child { grid-template-columns: minmax(0, 1fr); }
  .list .item:first-child .t { font-size: 19px; -webkit-line-clamp: 4; }
  .amp-index { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .amp-card-h { flex-direction: column; gap: 0; padding: 10px 12px; }
  .amp-card-h h2 { font-size: 16px; }
  .amp-card-n .t { font-size: 14px; padding: 0 10px; }

  /* หน้าข่าว */
  .article h1 { font-size: 26px; }
  .deck { font-size: 17.5px; }
  .body { --fs: 17.5px; }
  .by-tools { margin-left: 0; width: 100%; justify-content: space-between; }
  .cover { margin-left: -16px; margin-right: -16px; }
  .cover img { border-radius: 0; }
  .tip-box { flex-direction: column; align-items: flex-start; }
  .tip-box .pill { margin-left: 0; }

  .profile-head { gap: 12px; }
  .profile-head .avatar { width: 64px; height: 64px; }
  .form-card { padding: 16px; }
  .f-grid { grid-template-columns: minmax(0, 1fr); }
  .btn-submit { justify-self: stretch; }
  .foot-top { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .foot-bottom { flex-direction: column; }
  .mcc { flex-wrap: wrap; left: 8px; right: 8px; bottom: 8px; padding: 12px; font-size: 13px; }
  .mcc-btns { width: 100%; }
  .mcc-btns .mcc-btn { flex: 1; }
  .grid4 { grid-template-columns: minmax(0, 1fr); }
}

/* ===== ตรวจหวย (/lottery) — ตัวเลขใช้ฟอนต์หัวข่าว + tabular-nums ให้หลักตรงกัน ===== */
.lt-check { background: var(--band); color: #fff; border-radius: 10px; padding: 20px; border-top: 5px solid var(--brand); }
.lt-check-top { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin-bottom: 14px; }
.lt-check h2 { margin: 0; font-size: 22px; color: var(--band-ink); }
.lt-draw { margin-left: auto; }
.lt-draw select { font: inherit; font-size: 15px; padding: 7px 10px; border-radius: var(--radius); border: 0; background: #fff; color: var(--ink); max-width: 100%; }
.lt-tickets { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
.lt-ticket { display: flex; gap: 8px; }
.lt-ticket input { flex: 1; min-width: 0; width: 100%; font-family: var(--head); font-weight: 600; font-size: 26px; letter-spacing: .35em; text-align: center; padding: 8px 10px; border-radius: var(--radius); border: 2px solid transparent; font-variant-numeric: tabular-nums; }
.lt-ticket input::placeholder { font-size: 16px; letter-spacing: 0; font-weight: 400; color: #999; }
.lt-ticket input:focus { outline: 0; border-color: var(--brand); }
.lt-ticket input[aria-invalid="true"] { border-color: #E5484D; }
.lt-del { border: 0; background: #2A2A2A; color: #fff; border-radius: var(--radius); width: 44px; cursor: pointer; font-size: 16px; }
.lt-actions { display: flex; gap: 10px; justify-content: space-between; align-items: center; }
.lt-add { border: 1px dashed #777; background: transparent; color: #ddd; border-radius: var(--radius); padding: 8px 14px; cursor: pointer; font: inherit; font-size: 14px; }
.lt-add:hover { border-color: var(--band-ink); color: var(--band-ink); }
.lt-add[hidden] { display: none; }
.lt-go { font-size: 18px; padding: 10px 34px; margin-left: auto; }
.lt-result { display: grid; gap: 8px; margin-top: 14px; }
.lt-result[hidden] { display: none; }
.lt-result .r { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; border-radius: var(--radius); padding: 10px 14px; background: #2A2A2A; }
.lt-result .r b { font-family: var(--head); font-size: 22px; letter-spacing: .12em; font-variant-numeric: tabular-nums; }
.lt-result .win { background: var(--brand); color: var(--brand-ink); }
.lt-result .win span { font-weight: 600; }
.lt-result .win em { font-style: normal; font-family: var(--head); margin-left: auto; }
.lt-result .lose span { color: #bbb; }
.lt-result .bad span { color: #FF9B9B; }
.lt-pending { display: flex; align-items: center; gap: 8px; margin: 16px 0 0; padding: 10px 14px; background: var(--brand-soft); border: 1px solid var(--brand-soft-line); border-radius: var(--radius); font-size: 15px; }
.lt-pending .dot { width: 10px; height: 10px; border-radius: 50%; background: #E5484D; animation: lt-blink 1.2s infinite; flex-shrink: 0; }
@keyframes lt-blink { 50% { opacity: .2; } }
.lt-main { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 20px; }
.lt-main > div { background: var(--paper); border: 1px solid var(--line); border-radius: 10px; padding: 14px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.lt-main .lbl { font-family: var(--head); font-weight: 600; font-size: 16px; }
.lt-main .amt { font-size: 13px; color: var(--muted); }
.lt-main .num, .lt-grid .num { font-family: var(--head); font-variant-numeric: tabular-nums; border-radius: 6px; transition: background .2s; }
.lt-main .nums { display: flex; flex-wrap: wrap; justify-content: center; gap: 2px 14px; }
.lt-main .lt-sub .num { font-size: 30px; font-weight: 800; letter-spacing: .04em; line-height: 1.3; padding: 0 4px; }
.lt-main .num.wait { font-size: 20px; color: var(--muted); font-weight: 600; }
.lt-main .lt-first { grid-column: 1 / -1; background: var(--brand); border-color: var(--brand); color: var(--brand-ink); }
.lt-first .num { font-size: clamp(44px, 9vw, 68px); font-weight: 800; letter-spacing: .1em; line-height: 1.15; padding: 0 8px; }
.lt-first .amt { color: var(--brand-ink); opacity: .75; }
.lt-main .lt-back2 { border-color: var(--brand); box-shadow: inset 0 0 0 1px var(--brand); }
.lt-prize { margin-top: 20px; background: var(--paper); border: 1px solid var(--line); border-radius: 10px; padding: 14px 16px 16px; }
.lt-prize-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; margin-bottom: 10px; }
.lt-prize-head h2 { margin: 0; font-size: 19px; padding-left: 10px; border-left: 5px solid var(--brand); line-height: 1.25; }
.lt-prize-head span { font-size: 14px; color: var(--muted); }
.lt-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 6px; }
.lt-grid.two { grid-template-columns: repeat(2, minmax(0, 160px)); }
.lt-grid .num { text-align: center; font-size: 19px; font-weight: 600; letter-spacing: .06em; padding: 5px 0; background: var(--bg); }
.lt-main .num.hit, .lt-grid .num.hit { background: #18A058; color: #fff; box-shadow: 0 0 0 3px rgba(24, 160, 88, .25); }
.lt-wait { margin: 0; color: var(--muted); }
.lt-pn { display: flex; justify-content: space-between; gap: 12px; margin-top: 22px; font-family: var(--head); }
.lt-pn a { color: var(--brand-text); }
.lt-pn a:hover { text-decoration: underline; }
.lt-note { font-size: 13px; color: var(--muted); margin: 16px 0 0; }
.lt-links { display: grid; gap: 8px; }
.lt-links .sec-head { margin-bottom: 6px; }
.lt-links a { color: var(--brand-text); }
.lt-links a:hover { text-decoration: underline; }
/* ตรวจหวยย้อนหลัง */
.lt-archive { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.lt-card { display: grid; gap: 8px; background: var(--paper); border: 1px solid var(--line); border-radius: 10px; padding: 14px 16px; }
.lt-card:hover { border-color: var(--brand); box-shadow: 0 2px 10px rgba(0, 0, 0, .06); }
.lt-card .d { font-family: var(--head); font-weight: 600; font-size: 17px; }
.lt-card small { display: block; font-size: 12px; color: var(--muted); font-family: var(--body); font-weight: 400; letter-spacing: 0; }
.lt-card .first { font-family: var(--head); font-weight: 800; font-size: 34px; letter-spacing: .08em; line-height: 1.1; font-variant-numeric: tabular-nums; }
.lt-card .row3 { display: flex; flex-wrap: wrap; gap: 6px 18px; font-family: var(--head); font-size: 17px; font-variant-numeric: tabular-nums; }
.lt-card .row3 b { background: var(--brand); color: var(--brand-ink); padding: 0 6px; border-radius: 4px; }
.lt-card .go { font-size: 14px; color: var(--brand-text); }
/* สถิติหวย */
.lt-stats { display: grid; gap: 20px; align-content: start; }
.lt-stats-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.lt-hint { margin: -6px 0 10px; font-size: 13px; color: var(--muted); }
.lt-bars { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.lt-bars li { display: grid; grid-template-columns: 52px minmax(0, 1fr) 84px; align-items: center; gap: 10px; }
.lt-bars.wide li { grid-template-columns: 96px minmax(0, 1fr) 72px; }
.lt-bars b { font-family: var(--head); font-size: 19px; font-variant-numeric: tabular-nums; }
.lt-bars.wide b { font-size: 15px; font-weight: 600; }
.lt-bars .bar { background: var(--bg); border-radius: 4px; height: 14px; overflow: hidden; }
.lt-bars .bar i { display: block; height: 100%; background: var(--brand); border-radius: 4px; }
.lt-bars em { font-style: normal; font-size: 13px; color: var(--muted); text-align: right; white-space: nowrap; }
.lt-repeat { display: grid; gap: 8px; }
.lt-repeat > div { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 10px; align-items: baseline; padding-bottom: 8px; border-bottom: 1px solid var(--line); }
.lt-repeat > div:last-child { border-bottom: 0; padding-bottom: 0; }
.lt-repeat b { font-family: var(--head); font-size: 22px; background: var(--brand); color: var(--brand-ink); text-align: center; border-radius: 4px; }
.lt-repeat span { display: flex; flex-wrap: wrap; gap: 4px 14px; }
.lt-repeat a { font-family: var(--head); font-variant-numeric: tabular-nums; }
.lt-repeat a:hover { color: var(--brand-text); }
.lt-repeat small { color: var(--muted); font-family: var(--body); font-size: 12px; }
@media (max-width: 760px) {
  .lt-check { padding: 16px; border-radius: 0; margin: 0 -16px; }
  .lt-draw { margin-left: 0; width: 100%; }
  .lt-draw select { width: 100%; }
  .lt-main { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lt-main .lt-back2 { grid-column: 1 / -1; }
  .lt-main .lt-sub .num { font-size: 26px; }
  .lt-grid { grid-template-columns: repeat(auto-fill, minmax(78px, 1fr)); }
  .lt-grid .num { font-size: 17px; }
  .lt-archive, .lt-stats-2 { grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) { .lt-pending .dot { animation: none; } }

/* =====================================================================
   สภาพอากาศสุรินทร์ (/weather, /weather/{อำเภอ}) — prefix wx-
   ===================================================================== */
.wx-sec + .wx-sec, .wx-sec.sec { margin-top: 40px; }
.wx-note { display: block; margin: 10px 0 0; font-size: 13px; line-height: 1.55; color: var(--muted); }
.wx-note a { color: var(--brand-text); }
.wx-empty { background: var(--brand-soft); border: 1px solid var(--brand-soft-line); border-radius: 10px; padding: 14px 18px; margin: 0; color: var(--ink-2); }
.chips a.on { background: var(--brand); border-color: var(--brand); color: var(--brand-ink); }

/* ประกาศเตือนภัย */
.wx-alert { display: grid; gap: 2px; margin-bottom: 12px; padding: 12px 16px; border-radius: 10px; background: #FFF1F2; border: 1px solid #FBC4CB; border-left: 5px solid var(--red); }
.wx-alert > b { font-family: var(--head); color: var(--red); font-size: 15px; }
.wx-alert > span { font-family: var(--head); font-weight: 600; color: var(--ink); }
.wx-alert summary { cursor: pointer; color: var(--brand-text); font-size: 14px; margin-top: 4px; }
.wx-alert details p { margin: 8px 0 0; font-size: 15px; white-space: pre-line; }
.wx-alert details a { color: var(--brand-text); }

/* กล่องใหญ่ ตอนนี้ + วันนี้ */
.wx-hero { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 18px 36px; align-items: center; background: var(--band); color: #fff;
  border-radius: 14px; padding: 24px 28px; border-top: 5px solid var(--brand); position: relative; overflow: hidden; }
.wx-hero::after { content: ''; position: absolute; right: -80px; top: -120px; width: 320px; height: 320px; border-radius: 50%; background: radial-gradient(circle, rgba(141,187,255,.18), transparent 70%); pointer-events: none; }
.wx-now { display: flex; align-items: center; gap: 16px; }
.wx-now img { flex: none; width: 96px; height: 96px; filter: drop-shadow(0 4px 10px rgba(0,0,0,.25)); }
.wx-temp { font-family: var(--head); font-weight: 600; font-size: 64px; line-height: 1; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.wx-desc { font-family: var(--head); font-weight: 600; font-size: 20px; margin-top: 6px; }
.wx-now small { display: block; color: var(--band-ink); font-size: 13px; margin-top: 2px; }
.wx-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 0; }
.wx-stats > div { background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.1); border-radius: 10px; padding: 8px 12px; min-width: 0; }
.wx-stats dt { font-size: 12.5px; color: var(--band-ink); }
.wx-stats dd { margin: 0; font-family: var(--head); font-weight: 500; font-size: 15.5px; line-height: 1.45; }
.wx-hilo dd b { font-size: 22px; font-weight: 600; }
.wx-aqi-chip dd i { display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: var(--aq); margin-right: 6px; vertical-align: 1px; box-shadow: 0 0 0 3px rgba(255,255,255,.12); }
.wx-advice { grid-column: 1 / -1; list-style: none; margin: 0; padding: 12px 0 0; border-top: 1px solid rgba(255,255,255,.12); display: flex; flex-wrap: wrap; gap: 6px 22px; font-size: 15px; color: #DCE8FF; }

/* รายชั่วโมง: คอลัมน์ 62px เลื่อนซ้ายขวา · เส้นอุณหภูมิ SVG สูง 50px อยู่บนสุด แล้วตัวเลข/ไอคอน/แท่งฝน/เวลา */
.wx-hours { overflow-x: auto; border: 1px solid var(--line); border-radius: 12px; background: linear-gradient(var(--brand-soft), #fff 70%); scrollbar-width: thin; }
.wx-hours:focus-visible { outline: 2px solid var(--brand); }
.wx-hours-in { padding: 8px 0 10px; }
.wx-hours-line { display: block; color: var(--brand); }
.wx-hours-line circle { fill: #fff; stroke: var(--brand); stroke-width: 2; }
.wx-hours-cols { list-style: none; margin: 0; padding: 0; display: flex; }
.wx-hours-cols li { flex: 0 0 62px; display: flex; flex-direction: column; align-items: center; gap: 1px; }
.wx-hours-cols li.newday { box-shadow: inset 1px 0 0 var(--brand-soft-line); }
.wx-h-temp { font-family: var(--head); font-weight: 600; font-size: 15px; line-height: 1.3; }
.wx-hours-cols img { width: 34px; height: 34px; }
.wx-h-rain { height: 26px; width: 14px; display: flex; align-items: flex-end; }
.wx-h-rain i { display: block; width: 100%; background: #38BDF8; border-radius: 3px 3px 0 0; }
.wx-h-mm { font-size: 11.5px; color: #0284C7; height: 16px; line-height: 16px; }
.wx-hours-cols time { font-size: 13px; color: var(--muted); white-space: nowrap; }
.wx-hours-cols time b { color: var(--band); font-family: var(--head); }

/* 7 วัน */
.wx-week { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.wx-week li { display: grid; grid-template-columns: 96px 48px minmax(0, 1fr) minmax(170px, 34%); gap: 12px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--line); }
.wx-week li:first-child { background: var(--brand-soft); margin: 0 -12px; padding: 10px 12px; }
.wx-week li > img { width: 44px; height: 44px; }
.wx-w-day b { display: block; font-family: var(--head); font-weight: 600; font-size: 16px; color: var(--band); }
.wx-w-day small, .wx-w-desc small { display: block; font-size: 13px; color: var(--muted); line-height: 1.45; }
.wx-w-desc b { font-family: var(--head); font-weight: 500; font-size: 15.5px; }
.wx-w-temp { display: grid; grid-template-columns: 34px minmax(0, 1fr) 34px; align-items: center; gap: 8px; font-family: var(--head); font-variant-numeric: tabular-nums; }
.wx-w-temp .lo { color: var(--muted); text-align: right; }
.wx-w-temp .hi { font-weight: 600; }
.wx-range { position: relative; height: 6px; background: var(--line); border-radius: 6px; }
.wx-range i { position: absolute; top: 0; bottom: 0; border-radius: 6px; background: linear-gradient(90deg, #38BDF8, #FACC15 55%, #F97316); }

/* 17 อำเภอ */
.wx-amps { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.wx-amp { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "h i" "t i" "s s" "m m" "tm tm"; align-content: start; gap: 0 6px;
  border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; background: var(--paper); transition: border-color .15s, box-shadow .15s; }
.wx-amp:hover { border-color: var(--brand); box-shadow: 0 4px 14px rgba(11,31,63,.08); }
.wx-amp h3 { grid-area: h; margin: 0; font-size: 16px; font-weight: 600; color: var(--band); }
.wx-amp:hover h3 { color: var(--brand-text); }
.wx-amp > img { grid-area: i; width: 40px; height: 40px; }
.wx-amp-t { grid-area: t; font-family: var(--head); font-variant-numeric: tabular-nums; color: var(--muted); font-size: 14px; }
.wx-amp-t b { color: var(--ink); font-size: 18px; font-weight: 600; }
.wx-amp > small { grid-area: s; font-size: 13px; color: var(--ink-2); }
.wx-amp-m { grid-area: m; justify-self: start; margin-top: 6px; font-size: 12px; border-radius: 999px; padding: 0 8px; background: var(--bg); color: var(--muted); }
.wx-amp-m.wet { background: #E0F2FE; color: #0369A1; font-weight: 600; }
.wx-amp-tm { grid-area: tm; display: flex; align-items: center; gap: 4px; margin-top: 6px; padding-top: 6px; border-top: 1px dashed var(--line); font-size: 12.5px; color: var(--muted); }

/* ฝนจริง 24 ชม. */
.wx-gauges { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.wx-gauges li { display: grid; grid-template-columns: minmax(0, 2fr) minmax(80px, 2fr) 96px; gap: 4px 12px; align-items: center; padding-bottom: 8px; border-bottom: 1px solid var(--line); }
.wx-g-name { min-width: 0; }
.wx-g-name b { display: block; font-family: var(--head); font-weight: 500; font-size: 15px; line-height: 1.4; }
.wx-g-name small { display: block; font-size: 12.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wx-g-bar { height: 12px; background: var(--bg); border-radius: 6px; overflow: hidden; }
.wx-g-bar i { display: block; height: 100%; border-radius: 6px; background: linear-gradient(90deg, #7DD3FC, #1D5FD1); }
.wx-g-mm { text-align: right; font-size: 13px; color: var(--muted); line-height: 1.3; }
.wx-g-mm b { font-family: var(--head); font-size: 19px; color: var(--ink); }
.wx-g-mm small { display: block; font-size: 12px; }

/* ระดับน้ำ */
.wx-water { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
.wx-water article { position: relative; border: 1px solid var(--line); border-top: 4px solid var(--lv); border-radius: 10px; padding: 12px 14px; display: grid; gap: 6px; align-content: start; }
.wx-water h3 { margin: 0; padding-right: 54px; font-size: 16px; font-weight: 600; color: var(--band); }
.wx-water h3 small { font-family: var(--body); font-weight: 400; font-size: 12px; color: var(--muted); }
.wx-water header span { display: block; font-size: 13px; color: var(--muted); }
.wx-wl { display: flex; align-items: baseline; gap: 10px; }
.wx-wl b { font-family: var(--head); font-weight: 600; font-size: 28px; line-height: 1.1; font-variant-numeric: tabular-nums; }
.wx-wl-tag { font-family: var(--head); font-weight: 600; font-size: 13px; color: #fff; background: var(--lv); border-radius: 999px; padding: 0 10px; }
.wx-wl-bar { height: 8px; border-radius: 6px; background: var(--bg); overflow: hidden; }
.wx-wl-bar i { display: block; height: 100%; background: var(--lv); }
.wx-water p { margin: 0; font-size: 14px; color: var(--ink-2); }
.wx-water time { position: absolute; top: 14px; right: 14px; font-size: 12px; color: var(--muted); }

/* ข้อความพยากรณ์ภาค */
.wx-text { background: var(--brand-soft); border-radius: 12px; padding: 4px 20px 16px; }
.wx-text h3 { font-size: 16px; color: var(--band); margin: 14px 0 4px; }
.wx-text h3 small { font-family: var(--body); font-weight: 400; color: var(--muted); font-size: 13px; }
.wx-text p { margin: 0; }
.wx-text summary { margin-top: 12px; cursor: pointer; font-family: var(--head); font-weight: 500; font-size: 14.5px; color: var(--brand-text); }
.wx-text details p { margin-top: 6px; font-size: 15.5px; color: var(--ink-2); }

.wx-cta { display: flex; align-items: center; justify-content: space-between; gap: 12px 20px; flex-wrap: wrap; margin-top: 40px; padding: 16px 20px; border: 1px dashed var(--brand-soft-line); border-radius: 12px; }
.wx-cta p { margin: 0; flex: 1 1 320px; }
.wx-cta a:not(.pill) { color: var(--brand-text); }

/* sidebar */
.wx-aqi { border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; border-top: 5px solid var(--aq); }
.wx-aqi .side-h { border: 0; padding: 0; }
.wx-aqi-now { display: flex; align-items: center; gap: 12px; }
.wx-aqi-now b { font-family: var(--head); font-weight: 600; font-size: 40px; line-height: 1; min-width: 72px; text-align: center; padding: 8px 10px; border-radius: 10px; background: var(--aq); color: #1F2937; }
.wx-aqi-now span { font-size: 13px; color: var(--muted); }
.wx-aqi-now strong { display: block; font-family: var(--head); font-weight: 600; font-size: 17px; color: var(--ink); }
.wx-aqi p { margin: 10px 0 0; font-size: 14.5px; color: var(--ink-2); line-height: 1.55; }
.wx-aqi-hist { display: flex; align-items: flex-end; gap: 2px; height: 46px; margin-top: 12px; border-bottom: 1px solid var(--line); }
.wx-aqi-hist i { flex: 1; min-width: 2px; border-radius: 2px 2px 0 0; }
.wx-radar { display: block; border-radius: 10px; overflow: hidden; background: var(--band); aspect-ratio: 800 / 681; }   /* ภาพ TMD 800×681 */
.wx-radar img { display: block; width: 100%; height: 100%; object-fit: contain; }
.wx-sun { display: flex; justify-content: space-between; gap: 10px; background: var(--brand-soft); border-radius: 10px; padding: 10px 14px; font-size: 14.5px; }
.wx-sun b { font-family: var(--head); }
.wx-src ul { margin: 0; padding-left: 18px; font-size: 14px; color: var(--ink-2); }
.wx-src li + li { margin-top: 4px; }
.wx-src a { color: var(--brand-text); }

/* ชิปอากาศในแถบบน + การ์ดหน้าแรก */
.util-wx { display: inline-flex; align-items: center; gap: 5px; color: var(--ink-2); }
.util-wx img { width: 20px; height: 20px; }
.util-wx b { font-family: var(--head); font-weight: 600; }
.util-wx:hover { color: var(--brand-text); }
.wx-home { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 2px 12px; align-items: center; background: var(--band); color: #fff; border-radius: 12px; padding: 14px 16px; }
.wx-home .side-h { grid-column: 1 / -1; color: var(--band-ink); border: 0; padding: 0; margin: 0 0 4px; font-size: 15px; }
.wx-home img { width: 58px; height: 58px; grid-row: span 2; }
.wx-home-t { font-family: var(--head); font-weight: 600; font-size: 28px; line-height: 1.15; }
.wx-home-t small { font-size: 15px; font-weight: 500; color: var(--band-ink); }
.wx-home-d { font-family: var(--head); font-weight: 500; font-size: 15px; }
.wx-home-m { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 2px 14px; margin-top: 6px; font-size: 13.5px; color: #DCE8FF; }
.wx-home-m i { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: var(--aq); margin-right: 5px; }
.wx-home > a { grid-column: 1 / -1; margin-top: 6px; font-family: var(--head); font-weight: 600; font-size: 14px; color: var(--band-ink); }
.wx-home > a:hover { text-decoration: underline; }

@media (max-width: 1024px) {
  .wx-hero { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 720px) {
  .wx-hero { margin: 0 -16px; border-radius: 0; padding: 18px 16px; }
  .wx-now img { width: 72px; height: 72px; }
  .wx-temp { font-size: 52px; }
  .wx-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .wx-advice { flex-direction: column; font-size: 14.5px; }
  .wx-advice li { padding-left: 1.6em; text-indent: -1.6em; }
  .wx-w-wind { display: none; }
  .wx-alert { margin-left: -16px; margin-right: -16px; border-radius: 0; }
  .wx-hours { margin: 0 -16px; border-radius: 0; border-left: 0; border-right: 0; }
  .wx-week li { grid-template-columns: 70px 40px minmax(0, 1fr); grid-template-areas: "d i s" "d i t"; gap: 2px 10px; }
  .wx-week li > img { grid-area: i; width: 40px; height: 40px; }
  .wx-w-day { grid-area: d; }
  .wx-w-desc { grid-area: s; }
  .wx-w-temp { grid-area: t; grid-template-columns: 28px minmax(0, 1fr) 30px; }
  .wx-week li:first-child { margin: 0 -16px; padding: 10px 16px; }
  .wx-amps { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .wx-gauges li { grid-template-columns: minmax(0, 1fr) 84px; }
  .wx-g-bar { grid-column: 1 / -1; grid-row: 2; height: 8px; }
  .wx-cta { padding: 14px 16px; }
}

/* ----- หน้าแรก: อากาศสุรินทร์วันนี้ (frontend/weather/_home) ----- */
.wxb-alert { display: block; margin-bottom: 12px; padding: 9px 14px; border-radius: 8px; background: #FFF1F2; border-left: 4px solid var(--red); font-size: 15px; }
.wxb-alert b { font-family: var(--head); color: var(--red); }
.wxb-alert:hover { text-decoration: underline; }
.wxb-grid { display: grid; grid-template-columns: 280px minmax(0, .9fr) minmax(0, 1.2fr); gap: 28px; align-items: start; }
.wxb-grid h3 { display: flex; align-items: baseline; gap: 8px; font-size: 16px; font-weight: 600; color: var(--band); margin: 0 0 8px; }
.wxb-grid h3 small { font-family: var(--body); font-weight: 400; font-size: 13px; color: var(--muted); }
/* ตอนนี้ (การ์ดกรมท่า) */
.wxb-now { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 6px 12px; align-items: center; background: var(--band); color: #fff;
  border-radius: 12px; padding: 16px 18px; border-top: 4px solid var(--brand); }
.wxb-now:hover .wxb-desc { color: var(--band-ink); }
.wxb-now img { width: 76px; height: 76px; }
.wxb-temp { display: block; font-family: var(--head); font-weight: 600; font-size: 46px; line-height: 1; font-variant-numeric: tabular-nums; }
.wxb-desc { display: block; font-family: var(--head); font-weight: 600; font-size: 17px; margin-top: 4px; }
.wxb-now ul { grid-column: 1 / -1; list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 2px; font-size: 14.5px; color: #DCE8FF; }
.wxb-now ul b { color: #fff; font-family: var(--head); }
.wxb-now li i { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: var(--aq); margin-right: 6px; }
.wxb-now p { grid-column: 1 / -1; margin: 6px 0 0; padding-top: 8px; border-top: 1px solid rgba(255,255,255,.12); font-size: 14px; line-height: 1.5; color: var(--band-ink); }
/* ชั่วโมงถัดไป + วันถัดไป */
.wxb-hours { list-style: none; margin: 0 0 18px; padding: 8px 0; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); overflow: hidden; border: 1px solid var(--line); border-radius: 10px; background: linear-gradient(var(--brand-soft), #fff); }
.wxb-hours li { display: flex; flex-direction: column; align-items: center; line-height: 1.3; }
.wxb-hours li + li { border-left: 1px solid var(--line); }
.wxb-hours time { font-size: 12.5px; color: var(--muted); white-space: nowrap; }
.wxb-hours img { width: 32px; height: 32px; margin: 2px 0; }
.wxb-hours b { font-family: var(--head); font-weight: 600; font-size: 15px; }
.wxb-hours small { min-height: 16px; font-size: 11.5px; color: #0284C7; white-space: nowrap; }
.wxb-days { list-style: none; margin: 0; padding: 0; }
.wxb-days li { display: grid; grid-template-columns: 70px 28px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 6px 0; border-bottom: 1px solid var(--line); font-size: 15px; }
.wxb-days li > span:first-child { font-family: var(--head); font-weight: 600; color: var(--band); }
.wxb-days img { width: 28px; height: 28px; }
.wxb-d-desc { color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wxb-d-desc small { color: #0284C7; }
.wxb-d-t { font-family: var(--head); color: var(--muted); font-variant-numeric: tabular-nums; }
.wxb-d-t b { color: var(--ink); }
/* 17 อำเภอ */
.wxb-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
/* ช่องละอำเภอ: ชื่อ (เต็มแถว) / ไอคอน · อุณหภูมิ · ฝน */
.wxb-tiles a { display: grid; grid-template-columns: auto auto minmax(0, 1fr); column-gap: 6px; align-items: center;
  border: 1px solid var(--line); border-radius: 8px; padding: 5px 9px 6px; background: var(--paper); transition: border-color .15s; }
.wxb-tiles a:hover { border-color: var(--brand); }
.wxb-tiles span { grid-column: 1 / -1; font-family: var(--head); font-weight: 500; font-size: 14px; line-height: 1.4; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wxb-tiles a:hover span { color: var(--brand-text); }
.wxb-tiles img { width: 24px; height: 24px; }
.wxb-tiles b { font-family: var(--head); font-weight: 600; font-size: 15px; font-variant-numeric: tabular-nums; }
.wxb-tiles small { justify-self: end; font-size: 12px; color: #0284C7; white-space: nowrap; }

@media (max-width: 1024px) {
  .wxb-grid { grid-template-columns: 280px minmax(0, 1fr); }
  .wxb-amp { grid-column: 1 / -1; }
  .wxb-tiles { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
  .wxb-grid { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .wxb-hours { margin-left: -16px; margin-right: -16px; border-radius: 0; border-left: 0; border-right: 0; overflow-x: auto; grid-auto-columns: 56px; }
  .wxb-tiles { grid-auto-flow: column; grid-template-columns: none; grid-template-rows: repeat(2, auto); grid-auto-columns: 128px; overflow-x: auto;
    margin: 0 -16px; padding: 0 16px 6px; scrollbar-width: none; }
  .wxb-tiles::-webkit-scrollbar { display: none; }
}