/*!
 * app.css — สไตล์ชีตหน้าเว็บสาธารณะ (เว็บข่าวมวย)
 * เขียนมือ ไม่มีเฟรมเวิร์ก · mobile-first · จุดตัดหลัก 640 / 900 / 1200px (แถบข้างเริ่มที่ 1024px)
 * ขนาดตัวอักษรใช้ rem (ผู้อ่านปรับขนาดได้ผ่าน html[data-text-size]) ส่วนระยะห่างใช้ px
 * รูปแบบไฟล์: หนึ่งกฎต่อหนึ่งบรรทัด เพื่อให้ไฟล์เล็กแต่ยังค้นและแก้ด้วยมือได้
 *
 * สารบัญ
 *   01 โทเคน                      08 ข่าว: hero, carousel, อันดับ, chip, แบ่งหน้า
 *   02 รีเซ็ตและพื้นฐาน            09 หน้าอ่านข่าว และ prose
 *   03 เลย์เอาต์                  10 แถบข้าง และผู้สนับสนุน
 *   04 ไอคอน ปุ่ม ฟอร์ม            11 มวย: fight card, เรต, รายการ, ปฏิทิน, ผลมวย
 *   05 โครงเว็บส่วนบน             12 คลิป และตัวเล่น YouTube
 *   06 โครงเว็บส่วนล่าง            13 หน้าค้นหา และ 404
 *   07 ข่าว: หัวข้อ, badge, การ์ด   14 ยูทิลิตี้, ลดการเคลื่อนไหว, พิมพ์
 *   15 ลวดลายไทย: ริบบิ้นธงชาติ (ต่อท้ายส่วนเสริมจากโมดูล)
 *   00 ฟอนต์ (@font-face) อยู่ก่อนส่วนที่ 01
 */

/* ========== 00 ฟอนต์ ========== */
/* เสิร์ฟจากเว็บเอง (assets/fonts/) เฉพาะน้ำหนักที่ไฟล์นี้ใช้: Kanit 500/600 = หัวข้อ เมนู ปุ่ม, Sarabun 400 = เนื้อความ, 700 = ตัวหนา
   บล็อกชุดเดียวกับ assets/css/fonts.css (ไฟล์นั้นมีครบทุกน้ำหนักสำหรับหลังบ้าน) — ใช้น้ำหนักใหม่เมื่อไร ต้องเพิ่มบล็อกที่นี่ด้วย
   ไม่เช่นนั้นเบราว์เซอร์จะสังเคราะห์ตัวหนาเอง · layout.php preload เฉพาะ sarabun-400-thai.woff2 (เนื้อความของทุกหน้า) */
@font-face { font-family: "Kanit"; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/kanit-500-thai.woff2") format("woff2"); unicode-range: U+02D7, U+0303, U+0331, U+0E01-0E5B, U+200C-200D, U+25CC; }
@font-face { font-family: "Kanit"; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/kanit-500-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Kanit"; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/kanit-600-thai.woff2") format("woff2"); unicode-range: U+02D7, U+0303, U+0331, U+0E01-0E5B, U+200C-200D, U+25CC; }
@font-face { font-family: "Kanit"; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/kanit-600-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Sarabun"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/sarabun-400-thai.woff2") format("woff2"); unicode-range: U+02D7, U+0303, U+0331, U+0E01-0E5B, U+200C-200D, U+25CC; }
@font-face { font-family: "Sarabun"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/sarabun-400-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Sarabun"; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/sarabun-700-thai.woff2") format("woff2"); unicode-range: U+02D7, U+0303, U+0331, U+0E01-0E5B, U+200C-200D, U+25CC; }
@font-face { font-family: "Sarabun"; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/sarabun-700-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

/* ========== 01 โทเคน ========== */
:root {
  color-scheme: dark;
  /* สี — ทุกคู่ข้อความ/พื้นผ่าน WCAG AA */
  --bg: #081028;
  --bg-deep: #050b1c;
  --surface: #0f1a3d;
  --surface-2: #16234d;
  --surface-3: #223165;
  --line: rgba(170, 190, 255, .13);
  --line-strong: rgba(170, 190, 255, .24);
  --line-hover: rgba(200, 214, 255, .44);
  --text: #f1f4fb;
  --text-soft: #d6dcef;
  --muted: #aeb8d8;
  --dim: #8f9bc2;
  --rank-dim: #7b89b5;
  --white: #fff;
  --red: #e5202e;
  --red-dark: #c4121f;
  --red-text: #ff7079;
  --red-soft: rgba(229, 32, 46, .15);
  --gold: #f2b84b;
  --gold-ink: #1c1504;
  --gold-soft: rgba(242, 184, 75, .12);
  --gold-line: rgba(242, 184, 75, .42);
  --blue: #3b82f6;
  --blue-text: #82b1ff;
  --blue-soft: rgba(59, 130, 246, .16);
  --green: #3ecf8e;
  --scrim: rgba(4, 8, 24, .78);
  --tint: rgba(190, 205, 255, .09);
  /* สีธงชาติ ใช้กับลวดลายตกแต่งเท่านั้น (ไม่ใช้กับตัวอักษร) */
  --flag-red: #d81e34;
  --flag-white: #f4f6fb;
  --flag-blue: #2a4bb0;
  /* ตัวอักษร */
  --font-head: "Kanit", "Leelawadee UI", "Thonburi", "Noto Sans Thai", Tahoma, sans-serif;
  --font-body: "Sarabun", "Leelawadee UI", "Thonburi", "Noto Sans Thai", Tahoma, sans-serif;
  --fs-xs: .8125rem;
  --fs-sm: .875rem;
  --fs-base: 1rem;
  --fs-body: 1rem;
  --fs-prose: 1.125rem;
  --lh-head: 1.38;
  --lh-body: 1.7;
  /* รูปทรงและเลย์เอาต์ */
  --radius: 14px;
  --radius-sm: 10px;
  --radius-pill: 999px;
  --container: 1240px;
  --gutter: 16px;
  --header-h: 56px;
  --tabbar-h: 60px;
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --shadow: 0 14px 40px rgba(0, 0, 0, .45);
  /* การเคลื่อนไหว */
  --ease: cubic-bezier(.2, .7, .3, 1);
  --speed: .18s;
  /* ลำดับชั้น */
  --z-header: 50;
  --z-totop: 55;
  --z-tabbar: 60;
  --z-cookie: 70;
  --z-drawer: 80;
  --z-skip: 100;
}
@media (min-width: 640px) {
  :root { --gutter:24px;--fs-body:1.0625rem }
}
@media (min-width: 900px) {
  :root { --header-h:64px;--fs-prose:1.1875rem }
}
@media (min-width: 1200px) {
  :root { --gutter:32px }
}

/* ========== 02 รีเซ็ตและพื้นฐาน ========== */
*, *::before, *::after { box-sizing:border-box }
html { font-size:100%;-webkit-text-size-adjust:100%;text-size-adjust:100%;-webkit-tap-highlight-color:transparent;scroll-behavior:smooth;scroll-padding-top:calc(var(--header-h) + 20px) }
/* ผู้อ่านเลือกขนาดตัวอักษร: ขยายทุกอย่างที่เป็น rem */
html[data-text-size="lg"] { font-size:112.5% }
html[data-text-size="xl"] { font-size:125% }
body { margin:0;min-height:100vh;padding-bottom:calc(var(--tabbar-h) + var(--safe-bottom));background:var(--bg) url("../img/thai-lattice.svg") 0 0 / 72px 72px;color:var(--text);font-family:var(--font-body);font-size:var(--fs-body);line-height:var(--lh-body);overflow-wrap:break-word;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale }
@media (min-width: 900px) {
  body { padding-bottom:0 }
}
h1, h2, h3, h4, h5, h6 { margin:0;font-family:var(--font-head);font-weight:600;line-height:var(--lh-head);overflow-wrap:anywhere }
p, ul, ol, dl, dd, figure, blockquote { margin:0 }
ul, ol { padding:0;list-style:none }
a { color:inherit;text-decoration:none }
/* การเปลี่ยนสีของทุกลิงก์/ปุ่ม กำหนดครั้งเดียวตรงนี้ */
a, button, summary, .input, .select { transition:color var(--speed), background-color var(--speed), border-color var(--speed) }
img, svg, video, iframe { display:block;max-width:100% }
img { height:auto }
button, input, select, textarea { margin:0;font:inherit;color:inherit }
button { padding:0;border:0;background:none;cursor:pointer }
table { width:100%;border-collapse:collapse }
summary { cursor:pointer }
[hidden] { display:none !important }
:focus-visible { outline:2px solid var(--gold);outline-offset:2px }
::selection { background:rgba(229, 32, 46, .5);color:var(--white) }

/* ========== 03 เลย์เอาต์ ========== */
/* กริดคอลัมน์เดียวต้องเป็น minmax(0, 1fr) เสมอ ไม่เช่นนั้นเนื้อหากว้าง (ช่องกรอก คำยาว) จะดันคอลัมน์จนล้นจอ */
.field, .layout__side, .split__side, .search-panel__inner, .search-hero, .error-page, .article__header, .cookie-bar, .drawer__foot, .empty, .sponsor, .contact-list, .mini-bouts, .hero-card, .card--overlay, .event-card__body, .rank-item__body, .clip-card__body, .facts__item, .bout__foot, .odds__item, .post-nav__link { grid-template-columns:minmax(0, 1fr) }
.container { width:100%;max-width:var(--container);margin-inline:auto;padding-inline:var(--gutter) }
.container--narrow { max-width:860px }
.main { display:block;padding-top:16px }
.section { margin-top:44px }
@media (min-width: 900px) {
  .main { padding-top:24px }
  .section { margin-top:60px }
}
/* แถบพื้นเข้มเต็มความกว้างจอ ใช้คั่นจังหวะหน้าแรก */
.band { padding-block:36px;background:var(--surface);border-block:1px solid var(--line) }
/* เนื้อหาหลัก + แถบข้าง */
.layout { display:grid;grid-template-columns:minmax(0, 1fr);gap:44px }
.layout__main, .layout__side { min-width:0 }
.layout__side { display:grid;gap:24px;align-content:start }
@media (min-width: 640px) and (max-width: 1023.98px) {
  .layout__side { grid-template-columns:repeat(2, minmax(0, 1fr)) }
}
@media (min-width: 1024px) {
  .layout { grid-template-columns:minmax(0, 1fr) 320px;gap:40px }
  /* กล่องสุดท้ายของแถบข้างเกาะตามการเลื่อน */
  .layout__side { display:flex;flex-direction:column }
  .layout__side > .is-sticky { position:sticky;top:calc(var(--header-h) + 16px) }
}
@media (min-width: 1200px) {
  .layout { grid-template-columns:minmax(0, 1fr) 340px;gap:48px }
}
/* สองคอลัมน์: โปรแกรมมวยวันนี้ คู่กับปฏิทิน/ผลมวย */
.split { display:grid;grid-template-columns:minmax(0, 1fr);gap:32px }
.split > * { min-width:0 }
.split__side { display:grid;gap:24px;align-content:start }
@media (min-width: 640px) and (max-width: 1023.98px) {
  .split__side { grid-template-columns:repeat(2, minmax(0, 1fr)) }
}
@media (min-width: 1024px) {
  .split { grid-template-columns:minmax(0, 1.65fr) minmax(0, 1fr);gap:40px }
}
/* กริดการ์ด */
.grid { display:grid;grid-template-columns:minmax(0, 1fr);gap:28px 20px }
@media (min-width: 640px) {
  .grid--2, .grid--3, .grid--4 { grid-template-columns:repeat(2, minmax(0, 1fr)) }
}
@media (min-width: 900px) {
  .grid { gap:32px 24px }
  .grid--3, .grid--4 { grid-template-columns:repeat(3, minmax(0, 1fr)) }
}
@media (min-width: 1200px) {
  .grid--4 { grid-template-columns:repeat(4, minmax(0, 1fr)) }
}
/* ในคอลัมน์เนื้อหาที่มีแถบข้าง การ์ดสามใบต่อแถวจะแคบเกิน */
@media (min-width: 1024px) {
  .layout__main .grid--3 { grid-template-columns:repeat(2, minmax(0, 1fr)) }
}
@media (min-width: 1200px) {
  .layout__main .grid--3 { grid-template-columns:repeat(3, minmax(0, 1fr)) }
}
/* ข่าวเด่น 1 ใบ + รายการแถวด้านข้าง */
.lead-list { display:grid;grid-template-columns:minmax(0, 1fr);gap:24px }
@media (min-width: 640px) {
  .lead-list { grid-template-columns:minmax(0, 1.12fr) minmax(0, 1fr);gap:28px }
}
/* รายการแถวคั่นด้วยเส้นบาง */
.rows { display:grid;grid-template-columns:minmax(0, 1fr);align-content:start }
.rows > * { padding-block:16px;border-bottom:1px solid var(--line) }
.rows > :first-child { padding-top:0 }
.rows > :last-child { padding-bottom:0;border-bottom:0 }
.stack { display:grid;grid-template-columns:minmax(0, 1fr);gap:16px }
.stack--lg { gap:28px }
/* แถวเลื่อนแนวนอนบนจอเล็ก กลายเป็นกริด 4 คอลัมน์บนจอใหญ่ (ต้องเป็นลูกตรงของ .container) */
.scroller { position:relative;display:flex;gap:14px;margin-inline:calc(var(--gutter) * -1);padding-inline:var(--gutter);overflow-x:auto;scroll-snap-type:x proximity;scroll-padding-inline:var(--gutter) }
.scroller > * { flex:0 0 74%;min-width:0;scroll-snap-align:start }
@media (min-width: 640px) {
  .scroller > * { flex-basis:42% }
}
@media (min-width: 900px) {
  .scroller { display:grid;grid-template-columns:repeat(4, minmax(0, 1fr));gap:24px;margin-inline:0;padding-inline:0;overflow:visible }
}
.hero__track, .scroller, .chips--scroll, .date-strip__list, .tabs, .ticker__viewport { scrollbar-width:none }
.hero__track::-webkit-scrollbar, .scroller::-webkit-scrollbar, .chips--scroll::-webkit-scrollbar, .date-strip__list::-webkit-scrollbar, .tabs::-webkit-scrollbar, .ticker__viewport::-webkit-scrollbar { display:none }

/* ========== 04 ไอคอน ปุ่ม ฟอร์ม ========== */
.icon { display:inline-block;flex:none;width:1.25em;height:1.25em;fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round;vertical-align:-.22em }
.icon--sm { width:1em;height:1em }
.icon--lg { width:1.75em;height:1.75em }
.btn { display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:10px 22px;border:1px solid transparent;border-radius:var(--radius-sm);font-family:var(--font-head);font-size:var(--fs-base);font-weight:500;line-height:1.35;text-align:center;cursor:pointer }
.btn--primary { background:var(--red);color:var(--white) }
.btn--primary:hover { background:var(--red-dark) }
.btn--ghost { border-color:var(--line-strong);color:var(--text) }
.btn--ghost:hover { border-color:var(--line-hover);background:var(--tint);color:var(--white) }
.btn--sm { min-height:44px;padding:8px 16px;font-size:var(--fs-sm) }
.btn--block { width:100% }
.btn[disabled] { opacity:.5;cursor:not-allowed }
.icon-btn { display:inline-flex;flex:none;align-items:center;justify-content:center;width:44px;height:44px;border-radius:50%;color:var(--text) }
.icon-btn:hover { background:var(--tint);color:var(--white) }
.icon-btn .icon { width:22px;height:22px }
.icon-btn--line { border:1px solid var(--line-strong) }
.icon-btn--line:hover { border-color:var(--line-hover) }
.icon-btn.is-disabled { opacity:.35;pointer-events:none }
/* ฟอร์ม */
.field { display:grid;gap:6px;min-width:0 }
.field__label { font-family:var(--font-head);font-size:var(--fs-sm);font-weight:500;color:var(--text-soft) }
.input, .select { width:100%;min-height:48px;padding:10px 14px;border:1px solid var(--line-strong);border-radius:var(--radius-sm);background:var(--bg);color:var(--text);font-size:max(1rem, 16px);line-height:1.5 }
.input::placeholder { color:var(--dim);opacity:1 }
.input:hover, .select:hover { border-color:var(--line-hover) }
.input:focus-visible, .select:focus-visible { border-color:var(--gold);outline-offset:0 }
.select { padding-right:40px;-webkit-appearance:none;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23aeb8d8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 9 7 7 7-7'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center;background-size:18px }
.select option { background:var(--surface);color:var(--text) }
.search-form { display:flex;gap:8px }
.search-form__field { position:relative;flex:1;min-width:0 }
.search-form__field > .icon { position:absolute;top:50%;left:14px;width:20px;height:20px;color:var(--muted);transform:translateY(-50%);pointer-events:none }
.search-form__field > .input { padding-left:44px }
.form-row { display:grid;grid-template-columns:minmax(0, 1fr);gap:12px }
@media (min-width: 640px) {
  .form-row { grid-template-columns:repeat(3, minmax(0, 1fr));align-items:end }
}

/* ========== 05 โครงเว็บส่วนบน: skip link, แถบวันที่, header, เมนู, ค้นหา, drawer, tab bar ========== */
.skip-link { position:absolute;top:8px;left:8px;z-index:var(--z-skip);padding:12px 18px;border-radius:var(--radius-sm);background:var(--gold);color:var(--gold-ink);font-family:var(--font-head);font-weight:500;transform:translateY(-200%) }
.skip-link:focus { transform:none }
/* แถบบนสุด: วันที่ไทย + โซเชียล */
.utilbar { display:none;background:var(--bg-deep);border-bottom:1px solid var(--line);color:var(--muted);font-size:var(--fs-sm) }
@media (min-width: 640px) {
  .utilbar { display:block }
}
.utilbar__inner { display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:40px }
.utilbar__date { display:flex;align-items:center;gap:8px;min-width:0 }
.utilbar .social { display:none }
@media (min-width: 640px) {
  .utilbar__inner { min-height:44px }
  .utilbar .social { display:flex;margin-right:-12px }
}
.social { display:flex;flex-wrap:wrap;align-items:center;gap:2px }
.social__link { display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:50%;color:var(--muted) }
.social__link:hover { background:var(--tint);color:var(--white) }
.social__link .icon { width:20px;height:20px }
.social--boxed { gap:8px }
.social--boxed .social__link { border:1px solid var(--line-strong);color:var(--text-soft) }
/* header เกาะบนสุด — ห้ามวาง drawer ไว้ข้างใน (backdrop-filter ทำให้ position: fixed เพี้ยน) */
.site-header { position:sticky;top:0;z-index:var(--z-header);background:linear-gradient(180deg, rgba(14, 26, 68, .98), rgba(8, 16, 42, .98));border-bottom:1px solid var(--gold-line);transition:box-shadow var(--speed) }
@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .site-header { background:linear-gradient(180deg, rgba(14, 26, 68, .9), rgba(8, 16, 42, .9));-webkit-backdrop-filter:saturate(150%) blur(14px);backdrop-filter:saturate(150%) blur(14px) }
}
.site-header.is-stuck { box-shadow:0 10px 30px rgba(0, 0, 0, .4) }
.site-header__inner { display:flex;align-items:center;gap:6px;min-height:var(--header-h) }
.site-header__menu { margin-left:-10px }
.site-header__tools { display:flex;flex:none;align-items:center;gap:2px;margin-left:auto;margin-right:-10px }
/* โลโก้ตัวอักษร: ใช้ px เพื่อไม่ให้ขยายตามขนาดอักษรของผู้อ่านจนล้น header */
.logo { display:inline-flex;flex:0 1 auto;align-items:center;gap:10px;min-width:0;min-height:44px;color:var(--white);font-family:var(--font-head);font-size:20px;font-weight:600;line-height:1.5;letter-spacing:.01em }
.logo__mark { flex:none;width:32px;height:32px }
.logo__words { display:flex;flex-direction:column;min-width:0;line-height:1.2 }
.logo__text { overflow:hidden;white-space:nowrap;text-overflow:ellipsis }
/* คำโปรยใต้โลโก้ใช้ Sarabun 400: เดิมเป็นที่เดียวที่ใช้ Sarabun 500 จึงไม่โหลดฟอนต์น้ำหนักนั้นมาเพื่อบรรทัดนี้บรรทัดเดียว */
.logo__tagline { display:none;overflow:hidden;color:var(--gold);font-family:var(--font-body);font-size:.75rem;font-weight:400;letter-spacing:.02em;white-space:nowrap;text-overflow:ellipsis }
@media (min-width: 1200px) {
  .logo { font-size:24px }
  .logo__tagline { display:block }
}
.logo__img { width:auto;max-height:40px }
@media (min-width: 900px) {
  .logo { font-size:22px }
  .logo__mark { width:34px;height:34px }
}
/* เมนูหลัก (จอ ≥ 900px) */
.nav { display:none }
@media (min-width: 900px) {
  .nav { display:block;flex:none;margin-left:14px }
  .nav__list { display:flex;align-items:center }
  .nav__item { position:relative;display:flex;align-items:center }
  /* รายการรองแสดงเฉพาะจอ ≥ 1200px (จอแคบกว่านั้นอยู่ใน drawer) */
  .nav__item--wide { display:none }
  .nav__link { position:relative;display:flex;align-items:center;min-height:var(--header-h);padding-inline:9px;color:var(--text-soft);font-family:var(--font-head);font-size:15px;font-weight:500;white-space:nowrap }
  .nav__link::after { content:"";position:absolute;right:9px;bottom:-1px;left:9px;height:3px;border-radius:3px 3px 0 0;background:var(--red);transform:scaleX(0);transition:transform var(--speed) var(--ease) }
  .nav__link:hover, .nav__item:hover > .nav__link, .nav__link[aria-current] { color:var(--white) }
  .nav__link[aria-current]::after { transform:none }
  .nav__item--has-sub > .nav__link { padding-right:2px }
  .nav__item--has-sub > .nav__link::after { right:2px }
  .nav__caret { display:inline-flex;align-items:center;justify-content:center;width:30px;height:44px;color:var(--muted) }
  .nav__caret:hover, .nav__item:hover > .nav__caret { color:var(--white) }
  .nav__caret .icon { width:16px;height:16px;transition:transform var(--speed) }
  .nav__caret[aria-expanded="true"] .icon { transform:rotate(180deg) }
  .nav__sub { position:absolute;top:calc(100% - 6px);left:0;z-index:5;min-width:230px;padding:8px;border:1px solid var(--line-strong);border-radius:12px;background:var(--surface-2);box-shadow:var(--shadow);opacity:0;visibility:hidden;transform:translateY(6px);transition:opacity var(--speed), transform var(--speed), visibility 0s var(--speed) }
  .nav__item:last-child > .nav__sub { right:0;left:auto }
  /* เปิดด้วย hover, ด้วยปุ่มลูกศร (JS ใส่ .is-open) และด้วยโฟกัสเมื่อไม่มี JS */
  .nav__item:hover > .nav__sub, .nav__item.is-open > .nav__sub, html:not(.js) .nav__item:focus-within > .nav__sub { opacity:1;visibility:visible;transform:none;transition-delay:0s }
  .nav__sublink { display:flex;align-items:center;min-height:44px;padding:8px 12px;border-radius:8px;color:var(--text-soft);font-size:16px;line-height:1.4 }
  .nav__sublink:hover, .nav__sublink[aria-current] { background:var(--tint);color:var(--white) }
}
@media (min-width: 1200px) {
  .site-header__menu { display:none }
  .nav { margin-left:20px }
  .nav__item--wide { display:flex }
  .nav__link { padding-inline:12px;font-size:16px }
  .nav__link::after { right:12px;left:12px }
}
/* แผงค้นหาใต้ header */
.search-panel { position:absolute;top:100%;right:0;left:0;padding-block:16px 20px;border-bottom:1px solid var(--line-strong);background:var(--surface);box-shadow:var(--shadow) }
.search-panel__inner { display:grid;gap:12px }
.search-panel__row { display:flex;align-items:center;gap:8px }
.search-panel__row > .search-form { flex:1;min-width:0 }
.search-panel__hint { display:flex;flex-wrap:wrap;align-items:center;gap:8px;color:var(--muted);font-size:var(--fs-sm) }
/* เมนูเลื่อนข้าง (เปิดได้ด้วย :target แม้ไม่มี JS) */
.drawer { position:fixed;inset:0;z-index:var(--z-drawer);visibility:hidden;transition:visibility 0s .26s }
.drawer:target, .drawer.is-open { visibility:visible;transition-delay:0s }
.drawer__backdrop { position:absolute;inset:0;background:var(--scrim);opacity:0;transition:opacity .26s }
.drawer:target .drawer__backdrop, .drawer.is-open .drawer__backdrop { opacity:1 }
.drawer__panel { position:absolute;top:0;bottom:0;left:0;display:flex;flex-direction:column;width:min(88vw, 348px);border-right:1px solid var(--line);background:var(--surface);overflow-y:auto;overscroll-behavior:contain;transform:translateX(-102%);transition:transform .26s var(--ease) }
.drawer:target .drawer__panel, .drawer.is-open .drawer__panel { transform:none }
.drawer__head { display:flex;flex:none;align-items:center;justify-content:space-between;gap:12px;min-height:60px;padding:8px 10px 8px 20px;border-bottom:1px solid var(--line) }
.drawer__search { flex:none;padding:16px 16px 4px }
.drawer__nav { flex:none;padding:8px 10px 20px }
.drawer__link, .drawer__group > summary { display:flex;align-items:center;gap:14px;min-height:50px;padding:8px 10px;border-radius:var(--radius-sm);color:var(--text);font-family:var(--font-head);font-size:1.0625rem;font-weight:500;line-height:1.4 }
.drawer__link > .icon, .drawer__group > summary > .icon:first-child { width:22px;height:22px;color:var(--muted) }
.drawer__link[aria-current] { background:var(--red-soft);color:var(--white) }
.drawer__link[aria-current] > .icon { color:var(--red-text) }
.drawer__group > summary { list-style:none }
.drawer__group > summary::-webkit-details-marker { display:none }
.drawer__chev { width:18px;height:18px;margin-left:auto;color:var(--muted);transition:transform var(--speed) }
.drawer__group[open] .drawer__chev { transform:rotate(180deg) }
.drawer__sub { padding:0 0 8px 46px }
.drawer__sublink { display:flex;align-items:center;min-height:44px;padding:6px 10px;border-radius:8px;color:var(--text-soft);line-height:1.4 }
.drawer__sublink[aria-current] { color:var(--white);font-weight:700 }
.drawer__foot { display:grid;gap:14px;margin-top:auto;padding:18px 20px calc(22px + var(--safe-bottom));border-top:1px solid var(--line) }
html.is-locked, html.is-locked body { overflow:hidden }
/* แถบเมนูล่างบนมือถือ */
.tabbar { position:fixed;right:0;bottom:0;left:0;z-index:var(--z-tabbar);display:grid;grid-template-columns:repeat(5, minmax(0, 1fr));padding-bottom:var(--safe-bottom);border-top:1px solid var(--line-strong);background:#070e25 }
.tabbar__item { position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;min-width:0;min-height:var(--tabbar-h);padding:6px 2px;color:var(--muted);font-family:var(--font-head);font-size:13px;font-weight:500;line-height:1.3 }
.tabbar__item .icon { width:24px;height:24px }
.tabbar__item[aria-current] { color:var(--white) }
.tabbar__item[aria-current] .icon { color:var(--red-text) }
.tabbar__item[aria-current]::before { content:"";position:absolute;top:-1px;left:50%;width:32px;height:3px;border-radius:0 0 3px 3px;background:var(--red);transform:translateX(-50%) }
@media (min-width: 900px) {
  .tabbar { display:none }
}

/* ========== 06 โครงเว็บส่วนล่าง: ข่าวด่วน, footer, คุกกี้, กลับขึ้นบน, notice, breadcrumb ========== */
.ticker { border-bottom:1px solid var(--line);background:var(--surface) }
.ticker__inner { display:flex;align-items:center;gap:12px;min-height:46px }
.ticker__label { display:inline-flex;flex:none;align-items:center;gap:5px;padding:3px 10px 3px 8px;border-radius:6px;background:var(--red);color:var(--white);font-family:var(--font-head);font-size:var(--fs-sm);font-weight:500;line-height:1.5 }
.ticker__label .icon { width:16px;height:16px }
.ticker__viewport { flex:1;min-width:0;overflow-x:auto }
.ticker__list { display:flex;align-items:center;width:max-content }
.ticker__item { display:flex;flex:none;align-items:center;white-space:nowrap }
.ticker__item::after { content:"";flex:none;width:5px;height:5px;margin-inline:20px;background:var(--gold);transform:rotate(45deg) }
.ticker__link { display:inline-flex;align-items:center;min-height:44px;color:var(--text-soft) }
.ticker__toggle { margin-right:-10px;color:var(--muted) }
.ticker__toggle .icon { width:18px;height:18px }
.ticker__toggle[aria-pressed="false"] .ticker__icon-play, .ticker__toggle[aria-pressed="true"] .ticker__icon-pause { display:none }
/* JS ใส่ .is-animated หลังทำสำเนารายการ (ไม่ใส่เมื่อผู้ใช้ขอลดการเคลื่อนไหว) */
.ticker.is-animated .ticker__viewport { overflow:hidden;-webkit-mask-image:linear-gradient(to right, transparent, #000 20px, #000 calc(100% - 20px), transparent);mask-image:linear-gradient(to right, transparent, #000 20px, #000 calc(100% - 20px), transparent) }
.ticker.is-animated .ticker__list { animation:ticker var(--ticker-duration, 40s) linear infinite }
.ticker.is-animated .ticker__viewport:hover .ticker__list, .ticker.is-animated .ticker__viewport:focus-within .ticker__list, .ticker.is-paused .ticker__list { animation-play-state:paused }
@keyframes ticker {
  to { transform:translateX(-50%) }
}
/* footer */
.site-footer { margin-top:72px;background:var(--bg-deep);color:var(--muted) }
.site-footer::before { content:"";display:block;height:22px;background:url("../img/thai-border.svg") center / 44px 22px repeat-x;opacity:.8 }
.site-footer__top { display:grid;grid-template-columns:repeat(2, minmax(0, 1fr));gap:36px 24px;padding-block:44px 36px }
.site-footer__col { min-width:0 }
.site-footer__col--wide { grid-column:1 / -1 }
@media (min-width: 1024px) {
  .site-footer__top { grid-template-columns:minmax(0, 1.5fr) repeat(2, minmax(0, .8fr)) minmax(0, 1.15fr);gap:48px;padding-block:56px 44px }
  .site-footer__col--wide { grid-column:auto }
}
.site-footer__about { max-width:44ch;margin-block:14px 16px }
.site-footer__title { margin-bottom:8px;color:var(--white);font-size:var(--fs-base);font-weight:600;letter-spacing:.02em }
.site-footer__links a { display:inline-flex;align-items:center;min-height:44px;color:var(--muted) }
.site-footer__links a:hover { color:var(--white) }
.contact-list { display:grid;gap:4px }
.contact-list__item { display:flex;align-items:flex-start;gap:12px;min-height:44px;padding-block:8px;overflow-wrap:anywhere }
.contact-list__item .icon { margin-top:.22em;color:var(--dim) }
.contact-list__item a:hover { color:var(--white) }
.site-footer__bottom { display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:4px 24px;padding-block:14px;border-top:1px solid var(--line);font-size:var(--fs-sm) }
.site-footer__legal { display:flex;flex-wrap:wrap;gap:0 22px }
.site-footer__legal a, .site-footer__legal button { display:inline-flex;align-items:center;gap:6px;min-height:44px;color:var(--muted) }
.site-footer__legal a:hover, .site-footer__legal button:hover { color:var(--white) }
/* แถบขอความยินยอมคุกกี้ (ลอยเหนือ tab bar) */
.cookie-bar { position:fixed;right:12px;bottom:calc(var(--tabbar-h) + var(--safe-bottom) + 12px);left:12px;z-index:var(--z-cookie);display:grid;gap:14px;max-width:760px;margin-inline:auto;padding:16px 18px;border:1px solid var(--line-strong);border-radius:var(--radius);background:var(--surface-2);box-shadow:var(--shadow) }
.cookie-bar__text { color:var(--text-soft);font-size:var(--fs-base);line-height:1.6 }
.cookie-bar__text a { color:var(--white);text-decoration:underline;text-underline-offset:.2em }
.cookie-bar__actions { display:flex;gap:8px }
.cookie-bar__actions .btn { flex:1 }
@media (min-width: 640px) {
  .cookie-bar { grid-template-columns:minmax(0, 1fr) auto;align-items:center;gap:20px }
  .cookie-bar__actions .btn { flex:none;min-width:108px }
}
@media (min-width: 900px) {
  .cookie-bar { bottom:20px }
}
/* ปุ่มกลับขึ้นบน */
.to-top { position:fixed;right:14px;bottom:calc(var(--tabbar-h) + var(--safe-bottom) + 14px);z-index:var(--z-totop);display:flex;align-items:center;justify-content:center;width:46px;height:46px;border:1px solid var(--line-strong);border-radius:50%;background:var(--surface-3);color:var(--white);box-shadow:0 8px 24px rgba(0, 0, 0, .4);opacity:0;visibility:hidden;transform:translateY(8px);transition:opacity var(--speed), transform var(--speed), visibility 0s var(--speed), background-color var(--speed) }
.to-top.is-visible { opacity:1;visibility:visible;transform:none;transition-delay:0s }
.to-top:hover { background:var(--red) }
@media (min-width: 900px) {
  .to-top { right:24px;bottom:24px }
}
/* ข้อความแจ้ง (flash) */
.notice { display:flex;align-items:flex-start;gap:12px;padding:14px 16px;border:1px solid var(--line-strong);border-left:3px solid var(--blue);border-radius:var(--radius-sm);background:var(--surface);color:var(--text);line-height:1.6 }
.notice > .icon { margin-top:.2em;color:var(--blue-text) }
.notice__body { flex:1;min-width:0 }
.notice__close { margin:-9px -10px -9px 0;color:var(--muted) }
.notice--success { border-left-color:var(--green) }
.notice--success > .icon { color:var(--green) }
.notice--warning { border-left-color:var(--gold) }
.notice--warning > .icon { color:var(--gold) }
.notice--error { border-left-color:var(--red) }
.notice--error > .icon { color:var(--red-text) }
/* breadcrumb */
.breadcrumb { color:var(--muted);font-size:var(--fs-sm) }
.breadcrumb__list { display:flex;flex-wrap:nowrap;align-items:center;overflow-x:auto;scrollbar-width:none;white-space:nowrap }
.breadcrumb__list::-webkit-scrollbar { display:none }
.breadcrumb__item { flex:none }
.breadcrumb__item:last-child { flex:0 1 auto }
.breadcrumb__item { display:inline-flex;align-items:center;min-width:0 }
.breadcrumb__item + .breadcrumb__item::before { content:"";flex:none;width:6px;height:6px;margin-inline:8px 12px;border-top:1.5px solid var(--dim);border-right:1.5px solid var(--dim);transform:rotate(45deg) }
.breadcrumb__link { display:inline-flex;align-items:center;gap:6px;min-height:44px }
.breadcrumb__link:hover { color:var(--white) }
.breadcrumb__current { max-width:min(46ch, 58vw);overflow:hidden;color:var(--text-soft);line-height:44px;white-space:nowrap;text-overflow:ellipsis }

/* ========== 07 ข่าว: หัวข้อ section, badge, meta, การ์ดข่าว ========== */
.section-head { display:flex;flex-wrap:wrap;align-items:center;gap:0 16px;margin-bottom:22px;padding-bottom:10px;border-bottom:1px solid var(--line) }
.section-head__titles { position:relative;min-width:0;padding-left:16px }
.section-head__titles::before { content:"";position:absolute;top:.3em;bottom:.3em;left:0;width:5px;border-radius:2px;background:linear-gradient(to bottom, var(--flag-red) 0 34%, var(--flag-white) 34% 66%, var(--flag-blue) 66%) }
.section-head__kicker, .kicker { color:var(--muted);font-family:var(--font-head);font-size:var(--fs-xs);font-weight:500;line-height:1.5;letter-spacing:.03em }
/* คำโปรยภาษาอังกฤษ (ใส่ lang="en") ใช้ตัวพิมพ์ใหญ่เว้นช่องไฟกว้าง ภาษาไทยไม่เว้น */
.section-head__kicker:lang(en), .kicker:lang(en) { font-size:.75rem;letter-spacing:.16em;text-transform:uppercase }
.section-head__title { color:var(--white);font-size:1.375rem }
.section-head__more { display:inline-flex;flex:none;align-items:center;gap:6px;min-height:44px;margin-left:auto;color:var(--muted);font-family:var(--font-head);font-size:var(--fs-sm);font-weight:500;white-space:nowrap }
.section-head__more .icon { width:18px;height:18px;transition:transform var(--speed) var(--ease) }
.section-head__more:hover { color:var(--white) }
.section-head__more:hover .icon { transform:translateX(3px) }
@media (min-width: 900px) {
  .section-head { margin-bottom:28px }
  .section-head__title { font-size:1.625rem }
}
/* ป้ายหมวดหมู่ */
.badge { position:relative;display:inline-block;align-self:flex-start;justify-self:start;max-width:100%;padding:2px 9px;overflow:hidden;border-radius:6px;background:var(--red);color:var(--white);font-family:var(--font-head);font-size:var(--fs-xs);font-weight:500;line-height:1.55;white-space:nowrap;text-overflow:ellipsis }
.badge--soft { background:var(--red-soft);color:var(--red-text) }
.badge--gold { background:var(--gold-soft);color:var(--gold) }
.badge--blue { background:var(--blue-soft);color:var(--blue-text) }
.badge--muted { background:var(--tint);color:var(--text-soft) }
/* ป้ายที่เป็นลิงก์: ขยายพื้นที่แตะให้ถึง 44px โดยไม่เปลี่ยนขนาดที่เห็น */
a.badge { overflow:visible }
a.badge::after { content:"";position:absolute;inset:-11px -6px }
/* แถวข้อมูลประกอบ: วันที่ ยอดอ่าน เวลาอ่าน */
.meta { display:flex;flex-wrap:wrap;align-items:center;gap:2px 14px;color:var(--muted);font-size:var(--fs-sm);line-height:1.6 }
.meta__item { display:inline-flex;align-items:center;gap:5px;min-width:0 }
.meta__item .icon { width:15px;height:15px }
/* การ์ดข่าว: แบบมาตรฐาน (รูปบน ข้อความล่าง) ทั้งใบกดได้ผ่านลิงก์ของหัวข้อ */
.card { position:relative;display:flex;flex-direction:column;gap:12px;min-width:0 }
.card__media { position:relative;flex:none;aspect-ratio:16 / 9;overflow:hidden;border-radius:var(--radius);background:var(--surface-2) }
.card__media img, .hero-card__media img, .clip-card__media img, .rank-item__media img, .article__image img, .event-head__poster img { position:absolute;inset:0;width:100%;height:100%;object-fit:cover }
.card__media img, .hero-card__media img, .clip-card__media img { transition:transform .5s var(--ease) }
.card:hover .card__media img, .hero-card:hover .hero-card__media img, .clip-card:hover .clip-card__media img { transform:scale(1.04) }
.card__body { display:flex;flex-direction:column;gap:8px;min-width:0 }
.card__title { color:var(--text);font-size:1.0625rem;font-weight:500;line-height:1.48;-webkit-line-clamp:3 }
.card__excerpt { color:var(--muted);line-height:1.62;-webkit-line-clamp:2 }
/* ตัดบรรทัดให้การ์ดสูงเท่ากัน */
.card__title, .card__excerpt, .hero-card__title, .hero-card__excerpt, .rank-item__title, .clip-card__title, .post-nav__title, .event-card__title { display:-webkit-box;overflow:hidden;-webkit-box-orient:vertical }
/* ลิงก์หัวข้อยืดคลุมทั้งการ์ด */
.card__title a::after, .hero-card__title a::after, .rank-item__title a::after, .clip-card__title a::after, .event-card__title a::after { content:"";position:absolute;inset:0;z-index:1;border-radius:var(--radius) }
.card__title a:focus-visible, .hero-card__title a:focus-visible, .rank-item__title a:focus-visible, .clip-card__title a:focus-visible, .event-card__title a:focus-visible { outline:0 }
.card__title a:focus-visible::after, .hero-card__title a:focus-visible::after, .rank-item__title a:focus-visible::after, .clip-card__title a:focus-visible::after, .event-card__title a:focus-visible::after { outline:2px solid var(--gold);outline-offset:2px }
/* การ์ดที่ตัดขอบ (overflow: hidden) ต้องวาดกรอบโฟกัสไว้ด้านใน ไม่เช่นนั้นจะมองไม่เห็น */
.hero-card__title a:focus-visible::after, .card--overlay .card__title a:focus-visible::after { outline-offset:-3px }
/* hover ของลิงก์หัวข้อทั้งเว็บ: ขีดเส้นใต้สีแดง */
.card:hover .card__title a, .rank-item:hover .rank-item__title a, .clip-card:hover .clip-card__title a, .event-card:hover .event-card__title a, a.byline__author:hover .byline__name, .mini-program__event a:hover, .result-card__title a:hover, .odds-block__title a:hover, .event-brief__title a:hover, .ticker__link:hover { color:var(--white);text-decoration:underline;text-decoration-color:var(--red);text-decoration-thickness:2px;text-underline-offset:.24em }
/* การ์ดใบใหญ่ (ข่าวนำของบล็อก) */
.card--lg .card__title { font-size:1.25rem;line-height:1.42 }
@media (min-width: 900px) {
  .card--lg .card__title { font-size:1.375rem }
}
/* การ์ดแนวนอน: รูปซ้าย ข้อความขวา */
.card--row { flex-direction:row;align-items:flex-start;gap:14px }
.card--row .card__media { width:clamp(108px, 34%, 184px);border-radius:var(--radius-sm) }
.card--row .card__body { flex:1;gap:6px }
.card--row .card__title { font-size:1rem }
/* การ์ดข้อความทับรูป */
.card--overlay { display:grid;overflow:hidden;border-radius:var(--radius);background:var(--surface-2) }
.card--overlay > .card__media, .card--overlay > .card__body { grid-area:1 / 1 }
.card--overlay > .card__media { min-height:100%;aspect-ratio:16 / 10;border-radius:0 }
.card--overlay > .card__media::after, .hero-card__media::after { content:"";position:absolute;inset:0;background:linear-gradient(to top, rgba(4, 8, 24, .95) 0%, rgba(4, 8, 24, .66) 36%, rgba(4, 8, 24, 0) 74%) }
.card--overlay > .card__body { z-index:1;align-self:end;padding:16px }
.card--overlay .card__title { color:var(--white);font-size:1.125rem }
.card--overlay .meta, .hero-card .meta { color:rgba(255, 255, 255, .82) }
/* การ์ดข้อความล้วน */
.card--text { gap:6px }
.card--text .card__title { font-size:1rem }
/* บนมือถือ: ใบแรกเป็นการ์ดใหญ่ ที่เหลือย่อเป็นแถวเพื่อไม่ให้หน้ายาวเกิน */
@media (max-width: 639.98px) {
  .grid--feed { gap:0 }
  .grid--feed > .card { padding-block:16px;border-bottom:1px solid var(--line) }
  .grid--feed > .card:first-child { padding-top:0 }
  .grid--feed > .card:last-child { padding-bottom:0;border-bottom:0 }
  .grid--feed > .card:not(:first-child) { flex-direction:row;align-items:flex-start;gap:14px }
  .grid--feed > .card:not(:first-child) .card__media { width:clamp(108px, 34%, 184px);border-radius:var(--radius-sm) }
  .grid--feed > .card:not(:first-child) .card__body { flex:1;gap:6px }
  .grid--feed > .card:not(:first-child) .card__title { font-size:1rem }
  .grid--feed > .card:not(:first-child) .card__excerpt { display:none }
  .grid--feed > .card:first-child .card__title { font-size:1.25rem;line-height:1.42 }
}

/* ========== 08 ข่าว: hero, carousel, อันดับมาแรง, chip, แท็บ, แบ่งหน้า, สถานะว่าง, หัวหน้า ========== */
/* hero: มือถือ/แท็บเล็ตเป็นแถวเลื่อนแบบ snap, จอ ≥ 900px เป็นกริด ข่าวนำ 1 + ข่าวรอง 4 */
.hero { position:relative }
.hero__track { position:relative;display:flex;gap:12px;margin-inline:calc(var(--gutter) * -1);padding-inline:var(--gutter);overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:var(--gutter) }
.hero-card { position:relative;display:grid;flex:0 0 87%;min-width:0;overflow:hidden;border-radius:var(--radius);background:var(--surface-2);scroll-snap-align:start }
.hero-card__media, .hero-card__body { grid-area:1 / 1;min-width:0 }
.hero-card__media { position:relative;min-height:100%;aspect-ratio:4 / 3;overflow:hidden }
.hero-card__body { z-index:1;display:flex;flex-direction:column;align-self:end;gap:8px;padding:16px }
.hero-card__title { color:var(--white);font-size:1.25rem;font-weight:600;line-height:1.4;-webkit-line-clamp:3 }
.hero-card__excerpt { display:none;color:rgba(255, 255, 255, .84);line-height:1.6;-webkit-line-clamp:2 }
@media (min-width: 640px) {
  .hero-card { flex-basis:58% }
  .hero-card__media { aspect-ratio:16 / 10 }
}
@media (min-width: 900px) {
  .hero__track { display:grid;grid-template-columns:repeat(4, minmax(0, 1fr));gap:16px;margin-inline:0;padding-inline:0;overflow:visible;scroll-snap-type:none }
  .hero-card--lead { grid-column:1 / 3;grid-row:1 / 3 }
  .hero-card--lead .hero-card__media { min-height:340px;aspect-ratio:auto }
  .hero-card--lead .hero-card__body { gap:10px;padding:24px }
  .hero-card--lead .hero-card__title { font-size:1.75rem;line-height:1.34 }
  .hero-card--lead .hero-card__excerpt { display:-webkit-box }
}
/* 900–1199px: ช่องข่าวรองแคบเกินกว่าจะวางข้อความทับรูป จึงเป็นรูปบน ข้อความล่าง */
@media (min-width: 900px) and (max-width: 1199.98px) {
  .hero-card:not(.hero-card--lead) { display:flex;flex-direction:column;gap:10px;overflow:visible;border-radius:0;background:none }
  .hero-card:not(.hero-card--lead) .hero-card__media { flex:none;min-height:0;aspect-ratio:16 / 9;border-radius:var(--radius) }
  .hero-card:not(.hero-card--lead) .hero-card__media::after { display:none }
  .hero-card:not(.hero-card--lead) .hero-card__body { align-self:auto;padding:0 }
  .hero-card:not(.hero-card--lead) .hero-card__title { font-size:1rem;font-weight:500;line-height:1.48 }
  .hero-card:not(.hero-card--lead) .meta { display:none }
}
@media (min-width: 1200px) {
  .hero-card:not(.hero-card--lead) .hero-card__body { padding:14px }
  .hero-card:not(.hero-card--lead) .hero-card__title { font-size:1.0625rem;font-weight:500;line-height:1.45;-webkit-line-clamp:2 }
  .hero-card:not(.hero-card--lead) .meta { display:none }
  .hero-card--lead .hero-card__title { font-size:2rem }
}
/* ปุ่มและจุดบอกตำแหน่งของ carousel — แสดงเมื่อ JS พบว่าแถวเลื่อนได้จริง */
.carousel-nav { display:none;align-items:center;justify-content:center;gap:4px;margin-top:10px }
.is-scrollable > .carousel-nav { display:flex }
.carousel-nav__dots { display:flex;align-items:center }
.carousel-nav__dot { display:flex;align-items:center;justify-content:center;width:26px;height:44px }
.carousel-nav__dot::before { content:"";width:8px;height:8px;border-radius:4px;background:rgba(255, 255, 255, .3);transition:width var(--speed) var(--ease), background-color var(--speed) }
.carousel-nav__dot[aria-current]::before { width:22px;background:var(--red) }
/* อันดับข่าวมาแรง: ตัวเลขทองตัวใหญ่ */
.rank-list { display:grid;grid-template-columns:minmax(0, 1fr) }
.rank-item { position:relative;display:grid;grid-template-columns:40px minmax(0, 1fr);align-items:start;gap:12px;padding-block:14px;border-bottom:1px solid var(--line) }
.rank-item:first-child { padding-top:0 }
.rank-item:last-child { padding-bottom:0;border-bottom:0 }
.rank-item__num { color:var(--gold);font-family:var(--font-head);font-size:2rem;font-weight:600;line-height:1.15;font-variant-numeric:tabular-nums;text-align:center }
/* ทองเฉพาะสามอันดับแรก ที่เหลือลดน้ำหนักลง */
.rank-item:nth-child(n + 4) .rank-item__num { color:var(--rank-dim) }
.rank-item__body { display:grid;gap:6px;min-width:0 }
.rank-item__title { color:var(--text);font-size:1rem;font-weight:500;line-height:1.48;-webkit-line-clamp:3 }
/* แบบมีรูป ใช้ในหน้าข่าวมาแรง */
.rank-item--media { grid-template-columns:40px minmax(0, 1fr) clamp(96px, 28%, 200px);padding-block:18px }
.rank-item__media { position:relative;aspect-ratio:16 / 9;overflow:hidden;border-radius:var(--radius-sm);background:var(--surface-2) }
@media (min-width: 640px) {
  .rank-item--media { grid-template-columns:56px minmax(0, 1fr) clamp(96px, 28%, 200px);gap:18px }
  .rank-item--media .rank-item__num { font-size:2.5rem }
  .rank-item--media .rank-item__title { font-size:1.125rem }
}
/* chip: แท็บหมวดหมู่และแท็ก */
.chips { display:flex;flex-wrap:wrap;gap:8px }
.chip { display:inline-flex;flex:none;align-items:center;gap:6px;max-width:100%;min-height:44px;padding:8px 16px;border:1px solid var(--line-strong);border-radius:var(--radius-pill);color:var(--text-soft);font-family:var(--font-head);font-size:.9375rem;font-weight:500;line-height:1.35;white-space:nowrap }
.chip:hover { border-color:var(--line-hover);color:var(--white) }
.chip[aria-current] { border-color:var(--red);background:var(--red);color:var(--white) }
.chip__count { color:var(--muted);font-size:var(--fs-xs);font-variant-numeric:tabular-nums }
.chip[aria-current] .chip__count { color:var(--white) }
.chip--tag { gap:2px;padding-inline:14px;white-space:normal;overflow-wrap:anywhere;border-color:var(--line);background:var(--surface);font-family:var(--font-body);font-size:var(--fs-base);font-weight:400 }
.chip--tag::before { content:"#";color:var(--red-text);font-weight:700 }
/* แถว chip เลื่อนแนวนอนบนจอเล็ก (ต้องอยู่ในคอลัมน์ที่กว้างเท่า .container) */
@media (max-width: 899.98px) {
  .chips--scroll { flex-wrap:nowrap;margin-inline:calc(var(--gutter) * -1);padding-inline:var(--gutter);overflow-x:auto;scroll-padding-inline:var(--gutter) }
}
/* แท็บแบบเส้นใต้: สลับมุมมองของหน้าเดียวกัน */
.tabs { display:flex;gap:4px;border-bottom:1px solid var(--line);overflow-x:auto }
.tabs__link { position:relative;display:inline-flex;flex:none;align-items:center;gap:8px;min-height:48px;padding-inline:14px;color:var(--muted);font-family:var(--font-head);font-weight:500;white-space:nowrap }
.tabs__link:hover, .tabs__link[aria-current] { color:var(--white) }
.tabs__link[aria-current]::after { content:"";position:absolute;right:0;bottom:0;left:0;height:3px;border-radius:3px 3px 0 0;background:var(--red) }
/* แบ่งหน้า */
.pagination { margin-top:44px }
.pagination__list { display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:6px }
.pagination__link { display:inline-flex;align-items:center;justify-content:center;gap:6px;min-width:44px;height:44px;padding-inline:12px;border:1px solid var(--line-strong);border-radius:var(--radius-sm);color:var(--text-soft);font-family:var(--font-head);font-weight:500;font-variant-numeric:tabular-nums }
a.pagination__link:hover { border-color:var(--line-hover);background:var(--tint);color:var(--white) }
.pagination__link[aria-current] { border-color:var(--red);background:var(--red);color:var(--white) }
.pagination__link.is-disabled { opacity:.38 }
.pagination__link .icon { width:18px;height:18px }
.pagination__gap { min-width:24px;color:var(--muted);text-align:center }
/* มือถือ: เหลือเฉพาะ ก่อนหน้า · หน้าปัจจุบัน ± 1 · ถัดไป */
.pagination__item--far, .pagination__label { display:none }
@media (min-width: 640px) {
  .pagination__item--far { display:block }
  .pagination__label { display:inline }
}
/* สถานะว่าง */
.empty { display:grid;justify-items:center;gap:12px;padding:48px 20px;border:1px dashed var(--line-strong);border-radius:var(--radius);color:var(--muted);text-align:center }
.empty__icon { display:grid;place-items:center;width:68px;height:68px;border-radius:50%;background:var(--surface-2);color:var(--muted) }
.empty__icon .icon { width:30px;height:30px }
.empty__title { color:var(--white);font-size:1.25rem }
.empty__text { max-width:46ch }
/* หัวของหน้ารายการ */
.page-head { margin-bottom:24px;padding-bottom:22px;border-bottom:1px solid var(--line) }
.page-head__title { color:var(--white);font-size:1.75rem;line-height:1.32 }
.page-head__desc { max-width:70ch;margin-top:8px;color:var(--muted) }
.page-head__meta { margin-top:12px }
@media (min-width: 900px) {
  .page-head { margin-bottom:32px }
  .page-head__title { font-size:2.25rem }
}
.page-head--plain { margin-bottom:0;padding-bottom:0;border-bottom:0 }
/* h1 ของหน้าแรก: ข้อความแนะนำเว็บ เล็กและสงบ */
.home-intro { display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 14px;margin-bottom:16px }
.home-intro__title { color:var(--white);font-size:1.125rem;font-weight:500 }
.home-intro__date { color:var(--muted);font-size:var(--fs-sm) }
@media (min-width: 900px) {
  .home-intro { margin-bottom:20px }
  .home-intro__title { font-size:1.25rem }
}

/* ========== 09 หน้าอ่านข่าว และ prose ========== */
.article { min-width:0 }
.article__header { display:grid;gap:14px;margin-bottom:20px }
.article__title { color:var(--white);font-size:1.75rem;line-height:1.34;text-wrap:balance }
.article__standfirst { color:var(--text-soft);font-size:1.125rem;line-height:1.68 }
@media (min-width: 640px) {
  .article__title { font-size:2.125rem }
}
@media (min-width: 1200px) {
  .article__title { font-size:2.5rem;line-height:1.3 }
  .article__standfirst { font-size:1.25rem }
}
/* ผู้เขียน + วันที่ */
.byline { display:flex;flex-wrap:wrap;align-items:center;gap:8px 20px }
.byline__author { display:inline-flex;align-items:center;gap:10px;min-width:0;min-height:44px }
.byline__name { color:var(--white);font-family:var(--font-head);font-weight:500 }
.avatar { display:grid;flex:none;place-items:center;width:44px;height:44px;overflow:hidden;border-radius:50%;background:var(--surface-3);color:var(--white);font-family:var(--font-head);font-weight:600;object-fit:cover }
.avatar--lg { width:72px;height:72px;font-size:1.5rem }
/* แถบเครื่องมือของบทความ: แชร์ + ขนาดตัวอักษร */
.article__tools { display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 20px;padding-block:12px;border-block:1px solid var(--line) }
.share { display:flex;flex-wrap:wrap;align-items:center;gap:8px }
.share__label, .text-size__label { margin-right:4px;color:var(--muted);font-family:var(--font-head);font-size:var(--fs-sm) }
.share__btn { position:relative;display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border:1px solid var(--line-strong);border-radius:50%;color:var(--text) }
.share__btn .icon { width:20px;height:20px }
.share__btn:hover { border-color:var(--line-hover);background:var(--tint);color:var(--white) }
.share__btn--facebook:hover { border-color:#1877f2;background:#1877f2 }
.share__btn--line:hover { border-color:#06c755;background:#06c755;color:var(--bg-deep) }
.share__btn--x:hover { border-color:var(--white);background:var(--white);color:var(--bg-deep) }
/* JS ใส่ .is-done ชั่วครู่หลังคัดลอกลิงก์สำเร็จ ข้อความมาจาก data-done */
.share__btn.is-done { border-color:var(--green);color:var(--green) }
.share__btn.is-done::after { content:attr(data-done);position:absolute;bottom:calc(100% + 8px);left:50%;padding:3px 10px;border:1px solid var(--line-strong);border-radius:6px;background:var(--surface-3);color:var(--white);font-family:var(--font-body);font-size:var(--fs-xs);white-space:nowrap;transform:translateX(-50%) }
/* ปุ่มปรับขนาดตัวอักษร A− A A+ */
.text-size { display:inline-flex;align-items:center;gap:8px }
.text-size__group { display:inline-flex;overflow:hidden;border:1px solid var(--line-strong);border-radius:var(--radius-sm) }
.text-size__btn { min-width:46px;height:44px;padding-inline:10px;color:var(--text-soft);font-family:var(--font-head);font-size:16px;font-weight:500;line-height:1 }
.text-size__btn + .text-size__btn { border-left:1px solid var(--line-strong) }
.text-size__btn--dec { font-size:14px }
.text-size__btn--inc { font-size:19px }
.text-size__btn:hover, .text-size__btn[aria-pressed="true"] { background:var(--tint);color:var(--white) }
.text-size__btn:focus-visible { outline-offset:-3px }
.text-size__btn[disabled] { opacity:.35;cursor:default }
/* รูปนำ */
.article__figure { margin-block:24px }
.article__image { position:relative;aspect-ratio:16 / 9;overflow:hidden;border-radius:var(--radius);background:var(--surface-2) }
.article__caption, .prose figcaption { margin-top:10px;color:var(--muted);font-size:var(--fs-sm);line-height:1.6 }
/* สารบัญ */
.toc { margin-block:24px;border:1px solid var(--line-strong);border-radius:var(--radius);background:var(--surface) }
.toc__summary { display:flex;align-items:center;gap:10px;min-height:52px;padding:10px 18px;color:var(--white);font-family:var(--font-head);font-size:1.0625rem;font-weight:600;list-style:none }
.toc__summary::-webkit-details-marker { display:none }
.toc__chev { margin-left:auto;color:var(--muted);transition:transform var(--speed) }
.toc details[open] .toc__chev { transform:rotate(180deg) }
.toc__list { padding:6px 18px 14px;border-top:1px solid var(--line);counter-reset:toc }
.toc__item { counter-increment:toc }
.toc__link { display:flex;align-items:baseline;gap:10px;min-height:44px;padding-block:9px;color:var(--text-soft);line-height:1.55 }
.toc__link::before { content:counter(toc) ".";flex:none;min-width:1.5em;color:var(--muted);font-family:var(--font-head);font-variant-numeric:tabular-nums }
.toc__item--sub { counter-increment:none }
.toc__item--sub .toc__link { padding-left:calc(1.5em + 10px);color:var(--muted) }
.toc__item--sub .toc__link::before { content:"–";min-width:0 }
.toc__link:hover, .toc__link[aria-current] { color:var(--white) }
.toc__link[aria-current]::before { color:var(--red-text) }
/* เนื้อหาบทความ (HTML จากตัวแก้ไข) */
.prose { color:var(--text);font-size:var(--fs-prose);line-height:1.85 }
.prose > * + * { margin-top:1.15em }
.prose h2, .prose h3, .prose h4 { color:var(--white);line-height:1.4 }
.prose h2 { margin-top:1.9em;font-size:1.5rem }
.prose h3 { margin-top:1.7em;font-size:1.25rem }
.prose h4 { margin-top:1.5em;font-size:1.125rem }
.prose h2 + *, .prose h3 + *, .prose h4 + * { margin-top:.65em }
@media (min-width: 900px) {
  .prose h2 { font-size:1.625rem }
  .prose h3 { font-size:1.3125rem }
}
.prose a { color:var(--red-text);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.22em }
.prose a:hover { color:var(--white) }
.prose strong, .prose b { color:var(--white);font-weight:700 }
.prose ul, .prose ol { padding-left:1.5em }
.prose ul { list-style:disc }
.prose ol { list-style:decimal }
.prose li + li, .prose li > ul, .prose li > ol { margin-top:.4em }
.prose li::marker { color:var(--red-text);font-family:var(--font-head);font-weight:500 }
.prose blockquote { padding:16px 20px;border-left:3px solid var(--red);border-radius:0 var(--radius-sm) var(--radius-sm) 0;background:var(--surface);color:var(--text-soft) }
.prose blockquote > * + * { margin-top:.7em }
.prose blockquote cite { display:block;color:var(--muted);font-size:var(--fs-sm);font-style:normal }
.prose figure { margin-block:1.6em }
.prose img { height:auto;border-radius:var(--radius-sm) }
/* รูปที่ผู้เขียนจัดซ้าย/ขวา: จอเล็กแสดงเต็มความกว้าง จอใหญ่จึงลอยให้ข้อความล้อม */
.prose .align-center { display:block;margin-inline:auto }
.prose figure.align-center { display:table }
@media (min-width: 640px) {
  .prose .align-left { float:left;max-width:50%;margin:.3em 1.4em .8em 0 }
  .prose .align-right { float:right;max-width:50%;margin:.3em 0 .8em 1.4em }
}
.prose::after { content:"";display:block;clear:both }
.prose hr { margin-block:2em;border:0;border-top:1px solid var(--line-strong) }
/* ตาราง: Html::render ควรห่อด้วย .table-wrap เพื่อเลื่อนแนวนอนบนมือถือ */
.table-wrap { overflow-x:auto;border:1px solid var(--line-strong);border-radius:var(--radius-sm) }
.prose table { font-size:.92em;line-height:1.6 }
.prose > table { display:block;max-width:100%;overflow-x:auto }
.prose th, .prose td { padding:10px 14px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top }
.prose th { background:var(--surface-2);color:var(--white);font-family:var(--font-head);font-weight:500;white-space:nowrap }
.prose tr:last-child > td { border-bottom:0 }
/* วิดีโอฝัง: Html::render ควรห่อ iframe ด้วย .embed */
.embed { position:relative;aspect-ratio:16 / 9;overflow:hidden;border-radius:var(--radius-sm);background:#000 }
.embed iframe { position:absolute;inset:0;width:100%;height:100%;border:0 }
.prose > iframe { width:100%;height:auto;aspect-ratio:16 / 9;border:0;border-radius:var(--radius-sm) }
/* ที่มา แท็ก ผู้เขียน ข่าวก่อนหน้า/ถัดไป */
.article__source { margin-top:28px;color:var(--muted);font-size:var(--fs-sm) }
.article__source a { display:inline-flex;align-items:center;gap:5px;min-height:44px;color:var(--text-soft);text-decoration:underline;text-underline-offset:.22em }
.article__source a:hover { color:var(--white) }
.article__tags { margin-top:16px }
.author-box { display:flex;align-items:flex-start;gap:16px;margin-top:32px;padding:20px;border:1px solid var(--line);border-radius:var(--radius);background:var(--surface) }
.author-box__body { flex:1;min-width:0 }
.author-box__name { color:var(--white);font-size:1.125rem }
.author-box__bio { margin-top:6px;color:var(--muted);line-height:1.65 }
.author-box__link { display:inline-flex;align-items:center;gap:6px;min-height:44px;margin-top:4px;color:var(--text-soft);font-family:var(--font-head);font-size:var(--fs-sm);font-weight:500 }
.author-box__link:hover { color:var(--white) }
.post-nav { display:grid;grid-template-columns:minmax(0, 1fr);gap:12px;margin-top:32px }
@media (min-width: 640px) {
  .post-nav { grid-template-columns:repeat(2, minmax(0, 1fr));gap:16px }
  .post-nav__link--next { grid-column:2;text-align:right }
  .post-nav__link--next .post-nav__dir { justify-content:flex-end }
}
.post-nav__link { display:grid;align-content:start;gap:6px;min-width:0;padding:16px 18px;border:1px solid var(--line);border-radius:var(--radius);background:var(--surface) }
.post-nav__link:hover { border-color:var(--line-hover);background:var(--surface-2) }
.post-nav__dir { display:flex;align-items:center;gap:6px;color:var(--muted);font-family:var(--font-head);font-size:var(--fs-sm) }
.post-nav__title { color:var(--text);font-family:var(--font-head);font-weight:500;line-height:1.48;-webkit-line-clamp:2 }

/* ========== 10 แถบข้าง และผู้สนับสนุน ========== */
.widget { min-width:0;padding:20px;border:1px solid var(--line);border-radius:var(--radius);background:var(--surface) }
.widget__head { display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:16px }
.widget__title { position:relative;min-width:0;padding-left:14px;color:var(--white);font-size:1.125rem }
.widget__title::before { content:"";position:absolute;top:.28em;bottom:.28em;left:0;width:4px;border-radius:2px;background:var(--red) }
.widget__more { display:inline-flex;flex:none;align-items:center;gap:4px;min-height:44px;margin-block:-10px;color:var(--muted);font-family:var(--font-head);font-size:var(--fs-sm) }
.widget__more:hover { color:var(--white) }
/* พื้นที่ผู้สนับสนุน — รูปต้องมี width/height จริงเพื่อไม่ให้หน้าเลื่อน */
.sponsor { display:grid;justify-items:center;gap:6px;min-width:0 }
.sponsor__label { color:var(--dim);font-family:var(--font-head);font-size:.75rem;line-height:1.5;letter-spacing:.1em }
.sponsor__link { display:block;overflow:hidden;border:1px solid var(--line);border-radius:var(--radius-sm) }
.sponsor__link:hover { border-color:var(--line-hover) }
.sponsor__link img { width:100% }
.sponsor--leaderboard, .sponsor--inline { max-width:970px;margin-inline:auto }
.sponsor--leaderboard { margin-top:16px }
.sponsor--sidebar .sponsor__link { max-width:340px }
/* โปรแกรมมวยวันนี้แบบย่อในแถบข้าง */
.mini-program .meta { margin-top:4px }
.mini-program__event { color:var(--white);font-family:var(--font-head);font-size:1.0625rem;font-weight:500;line-height:1.45 }
.mini-bouts { display:grid;margin-block:12px 16px;border-top:1px solid var(--line) }
.mini-bout { display:grid;grid-template-columns:minmax(0, 1fr) auto minmax(0, 1fr);align-items:center;gap:8px;padding-block:10px;border-bottom:1px solid var(--line);font-size:.9375rem;line-height:1.45 }
.mini-bout__red, .mini-bout__blue { min-width:0;color:var(--text);overflow-wrap:anywhere }
.mini-bout__red { padding-left:10px;border-left:3px solid var(--red) }
.mini-bout__blue { padding-right:10px;border-right:3px solid var(--blue);text-align:right }
.mini-bout__vs { color:var(--dim);font-family:var(--font-head);font-size:.75rem;font-weight:600;letter-spacing:.06em }
.mini-bout--main .mini-bout__red, .mini-bout--main .mini-bout__blue { color:var(--white);font-family:var(--font-head);font-weight:500 }
.mini-bout--main .mini-bout__vs { color:var(--gold) }

/* ========== 11 มวย: pill, หัวรายการ, fight card, เรต, การ์ดรายการ, ปฏิทิน, แถบวัน, ผลมวย, ตารางเรต ========== */
/* ป้ายสถานะรายการ */
.pill { display:inline-flex;flex:none;align-items:center;gap:6px;padding:2px 11px;border:1px solid transparent;border-radius:var(--radius-pill);font-family:var(--font-head);font-size:var(--fs-xs);font-weight:500;line-height:1.6;white-space:nowrap }
.pill--today { border-color:var(--gold-line);background:var(--gold-soft);color:var(--gold) }
.pill--today::before { content:"";width:7px;height:7px;border-radius:50%;background:var(--gold);animation:pulse 1.8s ease-in-out infinite }
.pill--soon { background:var(--blue-soft);color:var(--blue-text) }
.pill--done { background:var(--tint);color:var(--text-soft) }
.pill--cancelled { background:var(--red-soft);color:var(--red-text) }
@keyframes pulse {
  50% { opacity:.4;transform:scale(.78) }
}
/* การ์ดหัวรายการมวย */
.event-head { position:relative;padding:22px 18px 18px;overflow:hidden;border:1px solid var(--line-strong);border-radius:var(--radius);background:var(--surface) }
/* แถบบน แดง|น้ำเงิน สื่อถึงสองมุม */
.event-head::before { content:"";position:absolute;top:0;right:0;left:0;z-index:1;height:3px;background:linear-gradient(90deg, var(--red) 0 50%, var(--blue) 50% 100%) }
.event-head__poster { position:relative;margin:-22px -18px 18px;aspect-ratio:16 / 9;background:var(--surface-2) }
.event-head__top { display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;margin-bottom:8px }
.event-head__title { color:var(--white);font-size:1.625rem;line-height:1.32 }
.event-head__lede { margin-top:8px;color:var(--muted) }
.event-head__actions { display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 20px;margin-top:18px;padding-top:16px;border-top:1px solid var(--line) }
.facts { display:grid;grid-template-columns:repeat(2, minmax(0, 1fr));gap:16px 20px;margin-top:18px }
.facts__item { display:grid;align-content:start;gap:2px;min-width:0 }
.facts dt { display:flex;align-items:center;gap:6px;color:var(--muted);font-size:var(--fs-sm) }
.facts dt .icon { width:16px;height:16px }
.facts dd { color:var(--white);font-family:var(--font-head);font-weight:500;line-height:1.5;overflow-wrap:anywhere }
@media (min-width: 900px) {
  .event-head { padding:28px 28px 22px }
  .event-head__poster { margin:-28px -28px 24px;aspect-ratio:21 / 9 }
  .event-head__title { font-size:2.125rem }
  .facts { grid-template-columns:repeat(3, minmax(0, 1fr));gap:20px 28px }
}
/* หัวรายการแบบย่อ วางเหนือ fight card ในหน้าแรก */
.event-brief { display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:6px 16px;margin-bottom:14px }
.event-brief__title { color:var(--white);font-size:1.25rem }
.event-brief > :first-child, .result-card__head > :first-child, .odds-block__head > :first-child { min-width:0 }
/* fight card — พื้นฐานคือเรียงซ้อน (มือถือ) เมื่อกล่องกว้าง ≥ 560px จะกางเป็น แดง | VS | น้ำเงิน */
.fight-card { display:grid;grid-template-columns:minmax(0, 1fr);gap:12px;container:fight / inline-size }
.bout { position:relative;display:grid;grid-template-columns:minmax(0, 1fr) auto;grid-template-areas:"label weight" "red red" "vs vs" "blue blue" "foot foot";align-items:center;column-gap:12px;padding:14px 16px 16px;border:1px solid var(--line);border-radius:var(--radius);background:var(--surface) }
.bout__head { display:contents }
.bout__label { grid-area:label;justify-self:start;color:var(--muted);font-family:var(--font-head);font-size:var(--fs-sm);font-weight:500;line-height:1.6 }
.bout__weight { display:inline-flex;grid-area:weight;align-items:center;justify-self:end;gap:5px;color:var(--muted);font-size:var(--fs-sm);line-height:1.6 }
.bout__weight .icon { width:15px;height:15px }
.bout__corner { position:relative;display:grid;grid-template-columns:minmax(0, 1fr) auto;align-items:center;gap:0 10px;min-width:0;padding:10px 0 10px 14px }
.bout__corner::before { content:"";position:absolute;top:12px;bottom:12px;left:0;width:3px;border-radius:2px;background:var(--corner) }
.bout__corner--red { grid-area:red;--corner:var(--red);--corner-text:var(--red-text) }
.bout__corner--blue { grid-area:blue;--corner:var(--blue);--corner-text:var(--blue-text) }
.bout__side { grid-column:1 / -1;color:var(--corner-text);font-family:var(--font-head);font-size:var(--fs-xs);font-weight:500;line-height:1.5;letter-spacing:.03em }
.bout__name { min-width:0;color:var(--white);font-family:var(--font-head);font-size:1.125rem;font-weight:500;line-height:1.42;overflow-wrap:anywhere }
.bout__win { display:inline-flex;align-items:center;gap:4px;padding:2px 10px 2px 8px;border-radius:var(--radius-pill);background:var(--gold);color:var(--gold-ink);font-family:var(--font-head);font-size:var(--fs-xs);font-weight:600;line-height:1.6;white-space:nowrap }
.bout__win .icon { width:14px;height:14px;stroke-width:2.5 }
.bout__vs { display:flex;grid-area:vs;align-items:center;gap:12px }
.bout__vs::before, .bout__vs::after { content:"";flex:1;height:1px;background:var(--line) }
.bout__vs-mark { display:grid;flex:none;place-items:center;width:38px;height:38px;border:1px solid var(--line-strong);border-radius:50%;background:var(--surface-2);color:var(--text-soft);font-family:var(--font-head);font-size:13px;font-weight:600;letter-spacing:.06em }
.bout__foot { display:grid;grid-area:foot;gap:8px;min-width:0;margin-top:10px;padding-top:12px;border-top:1px solid var(--line) }
.bout__result { display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px;color:var(--text-soft);line-height:1.55 }
.bout__result > .icon { color:var(--gold) }
.bout__result strong { color:var(--white);font-family:var(--font-head);font-weight:500 }
.bout__note { color:var(--muted);font-size:var(--fs-sm);line-height:1.6 }
/* คู่เอก */
.bout--main { border-color:var(--gold-line);background:linear-gradient(180deg, rgba(242, 184, 75, .08), rgba(242, 184, 75, 0) 52%), var(--surface) }
.bout--main .bout__label { padding:1px 10px;border:1px solid var(--gold-line);border-radius:6px;background:var(--gold-soft);color:var(--gold) }
.bout--main .bout__name { font-size:1.25rem;font-weight:600 }
.bout--main .bout__vs-mark { border-color:var(--gold-line);color:var(--gold) }
/* ผลการชก: ฝั่งชนะเด่น ฝั่งแพ้จาง */
.bout--red-win .bout__corner--red .bout__name, .bout--blue-win .bout__corner--blue .bout__name { font-weight:600 }
.bout--red-win .bout__corner--blue, .bout--blue-win .bout__corner--red { --corner:var(--line-strong);--corner-text:var(--muted) }
.bout--red-win .bout__corner--blue .bout__name, .bout--blue-win .bout__corner--red .bout__name { color:var(--muted);font-weight:400 }
/* เสมอ / ไม่มีการตัดสิน: ไม่มีฝั่งใดเด่น */
.bout--draw .bout__name, .bout--nc .bout__name { color:var(--text-soft) }
@container fight (min-width: 560px) {
  .bout { grid-template-columns:minmax(0, 1fr) minmax(92px, auto) minmax(0, 1fr);grid-template-areas:"red label blue" "red vs blue" "red weight blue" "foot foot foot";column-gap:20px;padding:18px 22px }
  .bout__label, .bout__weight { justify-self:center }
  .bout__corner { align-self:center;padding:6px 0 6px 16px }
  .bout__corner::before { top:8px;bottom:8px }
  /* มุมน้ำเงินชิดขวา ป้าย "ชนะ" อยู่ด้านในของชื่อ */
  .bout__corner--blue { grid-template-columns:auto minmax(0, 1fr);padding:6px 16px 6px 0;text-align:right }
  .bout__corner--blue::before { right:0;left:auto }
  .bout__corner--blue .bout__name { grid-area:2 / 2 }
  .bout__corner--blue .bout__win { grid-area:2 / 1 }
  .bout__vs { justify-content:center;margin-block:4px }
  .bout__vs::before, .bout__vs::after { display:none }
  .bout__vs-mark { width:44px;height:44px;font-size:14px }
  .bout__foot { justify-items:center;margin-top:14px }
  .bout__result { justify-content:center;text-align:center }
  .bout__note { text-align:center }
  .bout__name { font-size:1.1875rem }
  .bout--main .bout__name { font-size:1.375rem }
  .odds { width:min(100%, 460px) }
}
/* เรตมวย: เรตเปิด / เรตล่าสุด */
.odds { display:grid;grid-template-columns:repeat(2, minmax(0, 1fr));gap:8px }
.odds__item { display:grid;gap:1px;min-width:0;padding:8px 12px;border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--surface-2) }
.odds__label { color:var(--muted);font-size:var(--fs-xs);line-height:1.5 }
.odds__value { display:flex;align-items:center;gap:7px;color:var(--text-soft);font-family:var(--font-head);font-weight:500;line-height:1.45;overflow-wrap:anywhere }
.odds__item--latest { border-color:var(--line-strong) }
.odds__item--latest .odds__value { color:var(--white);font-weight:600 }
/* จุดสีบอกฝั่งที่เป็นต่อ (ใส่เมื่อข้อความราคาขึ้นต้นด้วย แดง / น้ำเงิน) */
.odds__value--red::before, .odds__value--blue::before, .odds-table__open--red::before, .odds-table__open--blue::before, .odds-table__latest--red::before, .odds-table__latest--blue::before { content:"";display:inline-block;flex:none;width:8px;height:8px;margin-right:7px;border-radius:50%;background:var(--red) }
.odds__value--red::before, .odds__value--blue::before { margin-right:0 }
.odds__value--blue::before, .odds-table__open--blue::before, .odds-table__latest--blue::before { background:var(--blue) }
.odds__value--none { color:var(--muted);font-family:var(--font-body);font-weight:400 }
/* การ์ดรายการมวยในหน้ารวมโปรแกรม */
.event-card { position:relative;display:grid;grid-template-columns:auto minmax(0, 1fr);align-items:start;gap:16px;padding:16px;border:1px solid var(--line);border-radius:var(--radius);background:var(--surface);transition:border-color .18s }
.event-card:hover { border-color:var(--line-hover) }
.event-card__date { display:grid;justify-items:center;width:64px;padding:8px 4px;border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--surface-2);color:var(--muted);font-size:var(--fs-xs);line-height:1.45 }
.event-card__day { color:var(--white);font-family:var(--font-head);font-size:1.625rem;font-weight:600;line-height:1.2;font-variant-numeric:tabular-nums }
.event-card--today .event-card__date { border-color:var(--gold-line);background:var(--gold-soft) }
.event-card--today .event-card__day { color:var(--gold) }
.event-card__body { display:grid;gap:6px;min-width:0 }
.event-card__top { display:flex;flex-wrap:wrap;align-items:center;gap:4px 12px }
.event-card__title { color:var(--white);font-size:1.125rem;line-height:1.42;-webkit-line-clamp:2 }
.event-card__main { display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 8px;margin-top:4px;padding-top:10px;border-top:1px solid var(--line);color:var(--text-soft);line-height:1.55 }
.event-card__main-label { color:var(--gold);font-family:var(--font-head);font-size:var(--fs-xs);font-weight:500 }
.event-card__vs { color:var(--dim);font-family:var(--font-head);font-size:.75rem;font-weight:600;letter-spacing:.06em }
.event-card__red::before, .event-card__blue::before { content:"";display:inline-block;width:8px;height:8px;margin-right:6px;border-radius:50%;background:var(--red) }
.event-card__blue::before { background:var(--blue) }
.event-card--cancelled .event-card__title, .event-card--cancelled .event-card__day { color:var(--muted) }
/* ปฏิทินรายเดือน */
.calendar { min-width:0 }
.calendar__head { display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:8px }
.calendar__title { flex:1;min-width:0;color:var(--white);font-family:var(--font-head);font-size:1.125rem;font-weight:600;text-align:center }
.calendar__grid { table-layout:fixed;border-collapse:separate;border-spacing:2px }
.calendar__grid th { padding-block:6px;color:var(--muted);font-family:var(--font-head);font-size:var(--fs-xs);font-weight:500;text-align:center }
.calendar__grid td { padding:0 }
.calendar__day { display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:44px;border-radius:var(--radius-sm);color:var(--dim);font-family:var(--font-head);font-weight:500;line-height:1.25;font-variant-numeric:tabular-nums }
/* วันที่มีรายการเป็นลิงก์ มีพื้นและจุดแดง */
a.calendar__day { background:var(--surface-2);color:var(--white) }
a.calendar__day:hover { background:var(--surface-3) }
.calendar__day.has-event::after { content:"";width:5px;height:5px;margin-top:2px;border-radius:50%;background:var(--red) }
.calendar__day.is-today { box-shadow:inset 0 0 0 1.5px var(--gold);color:var(--gold) }
.calendar__day.is-selected { background:var(--red);color:var(--white) }
.calendar__day.is-selected::after { background:var(--white) }
.calendar__legend { display:flex;flex-wrap:wrap;gap:6px 18px;margin-top:12px;padding-top:12px;border-top:1px solid var(--line);color:var(--muted);font-size:var(--fs-xs) }
.calendar__key { display:inline-flex;align-items:center;gap:7px }
.calendar__key::before { content:"";width:10px;height:10px;border-radius:50% }
.calendar__key--event::before { width:6px;height:6px;background:var(--red) }
.calendar__key--today::before { box-shadow:inset 0 0 0 1.5px var(--gold) }
.calendar__key--selected::before { border-radius:3px;background:var(--red) }
/* แถบเลือกวัน */
.date-strip { min-width:0 }
.date-strip__list { display:flex;gap:8px;overflow-x:auto;scroll-snap-type:x proximity }
@media (max-width: 899.98px) {
  .date-strip__list { margin-inline:calc(var(--gutter) * -1);padding-inline:var(--gutter);scroll-padding-inline:var(--gutter) }
}
.date-strip__day { position:relative;display:grid;flex:none;justify-items:center;width:62px;padding:7px 4px 13px;border:1px solid var(--line);border-radius:12px;background:var(--surface);color:var(--muted);font-size:var(--fs-xs);line-height:1.5;scroll-snap-align:start }
a.date-strip__day:hover { border-color:var(--line-hover) }
.date-strip__num { color:var(--white);font-family:var(--font-head);font-size:1.375rem;font-weight:600;line-height:1.25;font-variant-numeric:tabular-nums }
span.date-strip__day .date-strip__num { color:var(--dim) }
.date-strip__day.has-event::after { content:"";position:absolute;bottom:5px;left:50%;width:5px;height:5px;border-radius:50%;background:var(--red);transform:translateX(-50%) }
.date-strip__day.is-today { border-color:var(--gold-line) }
.date-strip__day.is-today .date-strip__dow { color:var(--gold) }
.date-strip__day[aria-current] { border-color:var(--red);background:var(--red);color:var(--white) }
.date-strip__day[aria-current] .date-strip__dow { color:var(--white) }
.date-strip__day[aria-current]::after { background:var(--white) }
/* ผลมวย: การ์ดรายการ + รายชื่อผู้ชนะแบบย่อ */
.result-card { min-width:0;padding:18px 18px 6px;border:1px solid var(--line);border-radius:var(--radius);background:var(--surface) }
.result-card__head { display:flex;align-items:flex-start;justify-content:space-between;gap:12px;padding-bottom:12px;border-bottom:1px solid var(--line) }
.result-card__title { margin-top:2px;color:var(--white);font-size:1.125rem;line-height:1.42 }
.result-list { display:grid;grid-template-columns:minmax(0, 1fr) }
.result-row { position:relative;display:grid;grid-template-columns:minmax(0, 1fr) auto;gap:0 12px;padding:10px 0 10px 14px;border-bottom:1px solid var(--line);line-height:1.55 }
.result-row:last-child { border-bottom:0 }
.result-row::before { content:"";position:absolute;top:13px;bottom:13px;left:0;width:3px;border-radius:2px;background:var(--line-strong) }
.result-row--red::before { background:var(--red) }
.result-row--blue::before { background:var(--blue) }
.result-row__label { grid-column:1 / -1;color:var(--gold);font-family:var(--font-head);font-size:var(--fs-xs);font-weight:500 }
.result-row__winner { min-width:0;color:var(--white);font-family:var(--font-head);font-weight:500;overflow-wrap:anywhere }
.result-row__method { max-width:11em;color:var(--gold);font-family:var(--font-head);font-size:var(--fs-sm);line-height:1.75;text-align:right }
.result-row--draw .result-row__method { color:var(--text-soft) }
.result-row__loser { grid-column:1 / -1;color:var(--muted);font-size:var(--fs-sm) }
.result-card__more { display:inline-flex;align-items:center;gap:6px;min-height:44px;margin-top:2px;color:var(--text-soft);font-family:var(--font-head);font-size:var(--fs-sm);font-weight:500 }
.result-card__more:hover { color:var(--white) }
.widget .result-card { padding:0;border:0;border-radius:0;background:none }
/* ตารางเรตมวย: พื้นฐานแตกแต่ละคู่เป็นบล็อก เมื่อกล่องกว้าง ≥ 700px จึงเป็นตารางจริง (วัดจากกล่อง ไม่ใช่จอ เพราะมีแถบข้าง) */
.odds-block { min-width:0;container:odds / inline-size;padding:18px 18px 8px;border:1px solid var(--line);border-radius:var(--radius);background:var(--surface) }
.odds-block__head { display:flex;align-items:flex-start;justify-content:space-between;gap:12px;padding-bottom:14px;border-bottom:1px solid var(--line-strong) }
.odds-block__title { margin-bottom:2px;color:var(--white);font-size:1.25rem;line-height:1.4 }
.odds-table, .odds-table tbody { display:block }
.odds-table tr { display:grid;grid-template-columns:repeat(2, minmax(0, 1fr));grid-template-areas:"label weight" "red blue" "open latest";gap:8px 10px;padding-block:14px;border-bottom:1px solid var(--line) }
.odds-table tbody tr:last-child { border-bottom:0 }
.odds-table thead { position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%) }
.odds-table td { display:block;min-width:0;overflow-wrap:anywhere }
.odds-table__label { grid-area:label;color:var(--muted);font-family:var(--font-head);font-size:var(--fs-sm);font-weight:500 }
.odds-table__weight { grid-area:weight;color:var(--muted);font-size:var(--fs-sm);text-align:right }
.odds-table__red, .odds-table__blue { color:var(--white);font-family:var(--font-head);font-weight:500;line-height:1.45 }
.odds-table__red { grid-area:red;padding-left:12px;border-left:3px solid var(--red) }
.odds-table__blue { grid-area:blue;padding-right:12px;border-right:3px solid var(--blue);text-align:right }
.odds-table__open, .odds-table__latest { display:flex;flex-wrap:wrap;align-items:center;padding:8px 12px;border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--surface-2);color:var(--text-soft);font-family:var(--font-head);font-weight:500;line-height:1.45 }
.odds-table__open { grid-area:open }
.odds-table__latest { grid-area:latest;border-color:var(--line-strong);color:var(--white);font-weight:600 }
.odds-table__open::after, .odds-table__latest::after { content:attr(data-label);order:-1;width:100%;color:var(--muted);font-family:var(--font-body);font-size:var(--fs-xs);font-weight:400 }
.odds-table__row--main .odds-table__label { color:var(--gold) }
@container odds (min-width: 700px) {
  .odds-table { display:table }
  .odds-table thead { position:static;width:auto;height:auto;overflow:visible;clip-path:none }
  .odds-table tbody { display:table-row-group }
  .odds-table tr { display:table-row }
  .odds-table th, .odds-table td { display:table-cell;padding:12px 10px;border:0;border-bottom:1px solid var(--line);border-radius:0;background:none;text-align:left;vertical-align:middle }
  .odds-table th { color:var(--muted);font-family:var(--font-head);font-size:var(--fs-sm);font-weight:500;white-space:nowrap }
  .odds-table tbody tr:last-child td { border-bottom:0 }
  .odds-table .odds-table__red, .odds-table .odds-table__blue { padding-left:14px }
  .odds-table__red { box-shadow:inset 3px 0 0 var(--red) }
  .odds-table__blue { box-shadow:inset 3px 0 0 var(--blue) }
  .odds-table__open, .odds-table__latest { white-space:nowrap }
  .odds-table__open::after, .odds-table__latest::after { display:none }
  .odds-table__row--main td { background:rgba(242, 184, 75, .05) }
}

/* ========== 12 คลิป และตัวเล่น YouTube แบบเบา ========== */
.clip-card { position:relative;display:flex;flex-direction:column;gap:10px;min-width:0 }
.clip-card__media { position:relative;flex:none;aspect-ratio:16 / 9;overflow:hidden;border-radius:var(--radius);background:var(--surface-2) }
.clip-card__media::after { content:"";position:absolute;inset:0;background:linear-gradient(to top, rgba(4, 8, 24, .6), rgba(4, 8, 24, 0) 55%) }
.clip-card__play, .yt__play { position:absolute;inset:0;z-index:1;display:grid;place-items:center;width:52px;height:52px;margin:auto;border:1.5px solid rgba(255, 255, 255, .9);border-radius:50%;background:rgba(4, 8, 24, .6);color:var(--white);transition:background-color var(--speed), border-color var(--speed), transform var(--speed) var(--ease) }
.clip-card__play .icon { width:22px;height:22px;margin-left:2px }
.clip-card:hover .clip-card__play { border-color:var(--red);background:var(--red);transform:scale(1.06) }
.clip-card__duration { position:absolute;right:8px;bottom:8px;z-index:1;padding:1px 7px;border-radius:6px;background:rgba(4, 8, 24, .86);color:var(--white);font-family:var(--font-head);font-size:var(--fs-xs);line-height:1.6;font-variant-numeric:tabular-nums }
.clip-card__body { display:grid;gap:6px;min-width:0 }
.clip-card__title { color:var(--text);font-size:1rem;font-weight:500;line-height:1.48;-webkit-line-clamp:2 }
.clip-card--lg .clip-card__title { font-size:1.25rem;line-height:1.42 }
.clip-card--lg .clip-card__play { width:68px;height:68px }
.clip-card--lg .clip-card__play .icon { width:28px;height:28px }
@media (min-width: 900px) {
  .clip-card--lg .clip-card__title { font-size:1.5rem }
}
.clip-card--row { flex-direction:row;align-items:flex-start;gap:12px }
.clip-card--row .clip-card__media { width:clamp(112px, 40%, 180px);border-radius:var(--radius-sm) }
.clip-card--row .clip-card__body { flex:1 }
.clip-card--row .clip-card__title { font-size:.9375rem;-webkit-line-clamp:3 }
.clip-card--row .clip-card__play { width:36px;height:36px }
.clip-card--row .clip-card__play .icon { width:16px;height:16px }
/* ตัวเล่น: แสดงรูปปก + ปุ่มเล่น แล้ว JS สลับเป็น iframe เมื่อกด (ไม่มี JS = ลิงก์ไป YouTube) */
.yt { position:relative;aspect-ratio:16 / 9;overflow:hidden;border-radius:var(--radius);background:#000 }
.yt__link { position:absolute;inset:0;display:block }
.yt__link::after { content:"";position:absolute;inset:0;background:radial-gradient(ellipse at center, rgba(4, 8, 24, 0) 30%, rgba(4, 8, 24, .5) 100%) }
.yt__thumb { position:absolute;inset:0;width:100%;height:100%;object-fit:cover }
.yt__play { width:76px;height:76px;border-color:var(--red);background:var(--red);box-shadow:0 10px 34px rgba(229, 32, 46, .45) }
.yt__play .icon { width:30px;height:30px;margin-left:3px }
.yt__link:hover .yt__play { transform:scale(1.07) }
.yt__link:focus-visible { outline-offset:-4px }
.yt iframe { position:absolute;inset:0;width:100%;height:100%;border:0 }

/* ========== 13 หน้าค้นหา และ 404 ========== */
.search-hero { display:grid;gap:16px;padding:18px;border:1px solid var(--line);border-radius:var(--radius);background:var(--surface) }
@media (min-width: 900px) {
  .search-hero { padding:24px }
}
.error-page { display:grid;justify-items:center;gap:14px;max-width:660px;margin-inline:auto;padding-block:32px 8px;text-align:center }
.error-page__code { color:var(--surface-3);font-family:var(--font-head);font-size:clamp(6rem, 30vw, 11rem);font-weight:600;line-height:1;letter-spacing:.02em }
.error-page__code span { color:var(--red) }
.error-page__title { color:var(--white);font-size:1.625rem }
.error-page__text { max-width:48ch;color:var(--muted) }
.error-page__actions { display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-top:6px }
.error-page .search-form { width:100%;max-width:520px;margin-top:10px }
@media (min-width: 900px) {
  .error-page { padding-block:56px 16px }
  .error-page__title { font-size:2rem }
}

/* ========== 14 ยูทิลิตี้, ลดการเคลื่อนไหว, พิมพ์ ========== */
.visually-hidden { position:absolute !important;width:1px !important;height:1px !important;margin:-1px !important;padding:0 !important;overflow:hidden !important;border:0 !important;clip-path:inset(50%) !important;white-space:nowrap !important }
/* องค์ประกอบที่ต้องใช้ JS: ซ่อนไว้จนกว่า <html> จะมีคลาส .js */
html:not(.js) .js-only { display:none !important }
.text-center { text-align:center }
.mt-0 { margin-top:0 }
.mt-md { margin-top:20px }
.mt-lg { margin-top:36px }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior:auto }
  *, *::before, *::after { animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important;scroll-behavior:auto !important }
  .ticker.is-animated .ticker__list { animation:none }
  .ticker.is-animated .ticker__viewport { overflow-x:auto }
}
@media print {
  /* กระดาษขาว: ทุกโทเคนสีพื้นเป็นขาว/เทาอ่อน และทุกโทเคนสีตัวอักษรต้องเข้มพอบนขาว (≥ 4.5:1)
     สีเน้นของธีมมืด (ทอง แดงอ่อน ฟ้าอ่อน เขียว เทาหม่น) บนกระดาษได้เพียง 1.8–3.5:1 จึงสลับเป็นเฉดเข้มของสีเดียวกัน */
  :root { --bg:#fff;--bg-deep:#fff;--surface:#fff;--surface-2:#fff;--surface-3:#e8eaf0;--text:#000;--text-soft:#111;--muted:#444;--dim:#555;--rank-dim:#555;--white:#000;--gold:#7a5200;--red-text:#b3121d;--blue-text:#1c4fd6;--green:#0a6b3f;--line:#ccc;--line-strong:#999 }
  body { padding:0;background:#fff;color:#000 }
  /* ป้าย "ชนะ" เป็นตัวเข้มบนพื้นทอง: เบราว์เซอร์มักไม่พิมพ์สีพื้น จึงใช้กรอบแทนพื้น */
  .bout__win { border:1px solid currentColor;background:none }
  .utilbar, .site-header, .drawer, .tabbar, .ticker, .site-footer, .cookie-bar, .to-top, .sponsor, .layout__side, .article__tools, .post-nav, .pagination, .carousel-nav { display:none !important }
  .layout { display:block }
  .prose a { color:#000 }
}

/* ==========================================================================
   ส่วนเสริมจากโมดูล (เดิมแยกไฟล์ใน assets/css/parts — ปัจจุบันรวมไว้ที่นี่ที่เดียว ไม่มีตัวโหลดไฟล์ย่อยแล้ว)
   ========================================================================== */

/* --- โมดูลโครงหน้าเว็บ (layout + partial ส่วนกลาง) --- */
/* แถบผู้ดูแล: เห็นเฉพาะผู้ที่ล็อกอินหลังบ้านอยู่ (ไม่เกาะจอ เลื่อนหายไปพร้อมแถบวันที่) */
.admin-bar { background:var(--gold);color:var(--gold-ink);font-family:var(--font-head);font-size:var(--fs-sm);font-weight:500;line-height:1.4 }
.admin-bar__inner { display:flex;flex-wrap:wrap;align-items:center;gap:0 20px;min-height:44px }
.admin-bar__user { display:inline-flex;align-items:center;gap:6px;min-width:0;margin-right:auto }
.admin-bar__user .icon { width:16px;height:16px }
.admin-bar__link { display:inline-flex;align-items:center;min-height:44px;text-decoration:underline;text-underline-offset:.2em }
.admin-bar__link:hover { text-decoration-thickness:2px }
.admin-bar :focus-visible { outline-color:var(--gold-ink) }

/* แบนเนอร์ที่ไม่มีลิงก์ (span.sponsor__link): กรอบไม่ต้องตอบสนองเมื่อชี้ */
span.sponsor__link:hover { border-color:var(--line) }

/* ส่วนท้าย: เมื่อไม่มีคอลัมน์หมวดหมู่หรือช่องทางติดต่อ ให้คอลัมน์ที่เหลือกระจายเต็มความกว้าง */
@media (min-width: 1024px) {
  .site-footer__top--cols-3 { grid-template-columns:minmax(0, 1.5fr) repeat(2, minmax(0, 1fr)) }
  .site-footer__top--cols-2 { grid-template-columns:minmax(0, 1.5fr) minmax(0, 1fr) }
}

@media print {
  .admin-bar { display:none !important }
}

/* --- โมดูลข่าว (รายการข่าว อ่านข่าว แท็ก ผู้เขียน ค้นหา) --- */
/* หน้าผู้เขียน: รูปประจำตัวคู่กับชื่อ (h1) ในส่วนหัวของหน้า */
.page-head__person { display:flex;align-items:center;gap:16px;min-width:0 }
.page-head__person > div { min-width:0 }

/* หน้ารวมแท็ก: จำนวนข่าวท้ายชื่อแท็ก (chip--tag เว้นช่องไฟแคบสำหรับเครื่องหมาย # เท่านั้น) */
.chip--tag .chip__count { margin-left:6px }

/* หน้าค้นหา: ตัวเน้นคำค้นในหัวข้อและคำโปรย (ค่าเริ่มต้นของเบราว์เซอร์เป็นพื้นเหลืองตัวดำ ไม่เข้ากับธีมมืด) */
.card mark { padding:0 .12em;border-radius:3px;background:var(--gold-soft);color:var(--gold) }

/* หน้าอ่านข่าว: พื้นที่ผู้สนับสนุนตำแหน่ง article_top (ใต้รูปหน้าปก ก่อนเนื้อข่าว) */
.article__sponsor { margin-block:24px }

/* หน้า "ติดต่อเรา": กล่องช่องทางติดต่อท้ายเนื้อหา (ใช้ .widget + .contact-list + .social ของเดิม) — ลิงก์โทร/อีเมลต้องดูออกว่ากดได้ */
.contact-block .contact-list__item a { text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.22em }
.contact-block__label { margin-block:12px 8px;color:var(--muted);font-size:var(--fs-sm) }

@media print {
  .article__sponsor { display:none !important }
}

/* --- มวยและข่าว: ลิงก์ชื่อนักมวย ลิงก์ชมสด ตารางสรุปของวัน กล่องศึกในหน้าข่าว ลิงก์แหล่งข่าวโปรด --- */
/* ชื่อนักมวยที่มีหน้าแท็ก: สีเดิมของชื่อ มีเส้นใต้จุดบาง ๆ บอกว่ากดได้ (ไม่แย่งสายตาจากคู่ชก) */
.fighter-link { text-decoration:underline dotted;text-decoration-color:var(--line-hover);text-decoration-thickness:1px;text-underline-offset:.22em }
.fighter-link:hover { color:var(--white);text-decoration:underline solid;text-decoration-color:var(--red);text-decoration-thickness:2px }
/* ลิงก์ชมสดทางการของศึก: ในบรรทัดข้อมูล (.meta) ในรายการข้อมูลของหน้าศึก (.facts) และในตารางสรุป */
.meta__item a[target="_blank"], .facts dd a, .sum-table td a { text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.22em }
.meta__item a[target="_blank"]:hover, .facts dd a:hover, .sum-table td a:hover { color:var(--white) }
/* ในการ์ดศึก ลิงก์ของชื่อศึกคลุมทั้งการ์ด (::after): ลิงก์ชมสดต้องอยู่เหนือชั้นนั้นจึงจะกดได้ */
.event-card .meta__item a { position:relative;z-index:2 }
/* ตารางสรุปศึกของวัน (หน้า /program และ /results): ตารางจริงทุกขนาดจอ บนมือถือเลื่อนแนวนอนในกรอบ .table-wrap */
.sum-table { width:100%;min-width:560px;border-collapse:collapse;font-size:var(--fs-sm);line-height:1.6 }
.sum-table caption { padding:12px 14px;border-bottom:1px solid var(--line-strong);color:var(--white);font-family:var(--font-head);font-size:1rem;font-weight:500;text-align:left }
.sum-table th, .sum-table td { padding:10px 14px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top }
.sum-table thead th { color:var(--muted);font-family:var(--font-head);font-weight:500;white-space:nowrap }
.sum-table tbody th { color:var(--white);font-family:var(--font-head);font-weight:500 }
.sum-table tbody th a:hover { text-decoration:underline;text-decoration-color:var(--red);text-decoration-thickness:2px;text-underline-offset:.24em }
.sum-table tbody tr:last-child th, .sum-table tbody tr:last-child td { border-bottom:0 }
.sum-table td { color:var(--text-soft) }
/* การ์ดผลมวยที่แสดงครบทุกคู่ ไม่มีลิงก์ "ดูผลครบทุกคู่" ท้ายการ์ด: เว้นขอบล่างให้พอดีกับแถวสุดท้าย */
.result-card--full { padding-bottom:10px }
/* หน้าข่าว: กล่องศึกมวยที่ข่าวพูดถึง */
.article__event { display:grid;gap:8px;min-width:0;margin-block:24px;padding:16px 18px;border:1px solid var(--line-strong);border-left:3px solid var(--gold);border-radius:var(--radius-sm);background:var(--surface) }
.article__event-head { display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px }
.article__event-name { color:var(--white);font-family:var(--font-head);font-size:1.125rem;font-weight:500;line-height:1.42;overflow-wrap:anywhere }
.article__event-name a:hover { text-decoration:underline;text-decoration-color:var(--red);text-decoration-thickness:2px;text-underline-offset:.24em }
.article__event-actions { display:flex;flex-wrap:wrap;gap:10px;margin-top:6px }
/* ลิงก์ "ตั้งเป็นแหล่งข่าวโปรดบน Google" ต่อท้ายปุ่มแชร์ */
.share__source { display:inline-flex;align-items:center;min-height:44px;color:var(--text-soft);font-size:var(--fs-sm);text-decoration:underline;text-underline-offset:.22em }
.share__source:hover { color:var(--white) }
@media print {
  .article__event-actions, .share__source { display:none !important }
}

/* ========== 15 ลวดลายไทย: ริบบิ้นธงชาติ ========== */
/* แถบธงชาติบนสุดของหน้า: แดง ขาว น้ำเงิน ขาว แดง ตามสัดส่วนธง 1:1:2:1:1 */
body::before { content:"";display:block;height:6px;background:linear-gradient(to bottom, var(--flag-red) 0 1px, var(--flag-white) 1px 2px, var(--flag-blue) 2px 4px, var(--flag-white) 4px 5px, var(--flag-red) 5px 6px) }
/* ริบบิ้นพลิ้วที่มุมขวาของส่วนหัว เฉพาะจอ ≥ 1366px: แคบกว่านี้ปุ่มค้นหาและปุ่มขนาดอักษรอยู่ชิดขอบขวาจนริบบิ้นทับ
   (ไอคอนสีอ่อนบนแถบขาวของริบบิ้นได้ contrast 1.02:1 มองไม่เห็น) — ระยะ right -268px เว้นวงกลมของปุ่มค้นหาไว้พอดีที่จอ 1366px
   พื้น header ต้องมีสองแบบเหมือนกฎหลักในหัวข้อ 05: ทึบ .98 เมื่อเบราว์เซอร์เบลอฉากหลังไม่ได้ และโปร่ง .9 เมื่อเบลอได้ */
@media (min-width: 1366px) {
  .utilbar { background:var(--bg-deep) url("../img/thai-ribbon.svg") right -268px top -34px / 560px auto no-repeat }
  .site-header { background-image:url("../img/thai-ribbon.svg"), linear-gradient(180deg, rgba(14, 26, 68, .98), rgba(8, 16, 42, .98));background-repeat:no-repeat;background-position:right -268px top -78px, 0 0;background-size:560px auto, auto }
  @supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
    .site-header { background-image:url("../img/thai-ribbon.svg"), linear-gradient(180deg, rgba(14, 26, 68, .9), rgba(8, 16, 42, .9)) }
  }
}
@media print {
  body::before, .site-footer::before { display:none }
}