/* ==========================================================================
   ubu-modern-v3.css — ดีไซน์ใหม่ (Navy + Gold) ตามแคนวาสที่อนุมัติ
   - สี/โลโก้/เมนู ดึงจากฐานข้อมูลผ่านตัวแปร --u-c1..c4 (ตั้งใน head_ref_v3.php)
   - ใช้หน่วย px เป็นหลัก (เว็บเดิมใช้ Bootstrap 3 ที่ตั้ง html{font-size:10px} ทำให้ rem เล็กลง)
   - ทุก class ขึ้นต้นด้วย u- เพื่อไม่ชนกับ style.css เดิม
   ========================================================================== */

:root {
  --u-font: "Prompt", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* สีธีม (ถูกทับด้วยค่าจากฐานข้อมูลใน head_ref_v3.php) */
  --u-c1: #11285c;
  --u-c2: #274690;
  --u-c3: #0b1e4a;
  --u-c4: #0b1633;
  --u-f1: #ffffff;
  --u-f2: #ffffff;
  --u-accent: #f5b301;
  --u-on-accent: #101828;
  --u-on1: #ffffff;
  --u-on4: #ffffff;

  --u-ink: #0f1b3d;
  --u-muted: #4a5470;
  --u-bg: #f6f4ef;
  --u-line: #e6e2d8;

  /* สีอ่อนที่คำนวณจากสีธีม (มี fallback ด้านล่าง) */
  --u-tint: #e8ecf5;
  --u-warm: #fdf3d6;
  --u-warm-ink: #8a6500;

  --u-shadow-1: 0 10px 30px rgb(15 27 61 / 0.08);
  --u-shadow-2: 0 18px 40px rgb(15 27 61 / 0.14);
  --u-shadow-3: 0 30px 60px rgb(0 0 0 / 0.3);
  --u-ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --u-gutter: clamp(16px, 4vw, 32px);
  --u-header-h: 96px;
}
@supports (color: color-mix(in srgb, red, blue)) {
  :root {
    --u-tint: color-mix(in srgb, var(--u-c1) 10%, #fff);
    --u-warm: color-mix(in srgb, var(--u-accent) 18%, #fff);
    --u-warm-ink: color-mix(in srgb, var(--u-accent) 45%, #000);
  }
}

/* ---------- พื้นฐานเฉพาะส่วนใหม่ ---------- */
:where(.u-topbar, .u-header, .u-mega, .u-home, .u-footer) {
  font-family: var(--u-font);
  font-size: 18px;
  line-height: 1.6;
  font-weight: 400;
  color: var(--u-ink);
  -webkit-text-size-adjust: 100%;
}
:where(.u-topbar, .u-header, .u-mega, .u-home, .u-footer) :where(*, *::before, *::after) { box-sizing: border-box; }
:where(.u-topbar, .u-header, .u-mega, .u-home, .u-footer) :where(ul, ol, p, h1, h2, h3, h4, figure) {
  margin: 0; padding: 0; list-style: none;
}
:where(.u-topbar, .u-header, .u-mega, .u-home, .u-footer) :where(h1, h2, h3, h4) {
  font-family: inherit; line-height: 1.3; color: inherit; font-weight: 600;
}
:where(.u-topbar, .u-header, .u-mega, .u-home, .u-footer) :where(img) { max-width: 100%; vertical-align: middle; }
:where(.u-topbar, .u-header, .u-mega, .u-home, .u-footer) :where(button) {
  font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; text-transform: none;
}
/* ชนะ a / a:hover / a:focus ของ Bootstrap 3 */
.u-topbar a, .u-header a, .u-mega a, .u-home a, .u-footer a { color: inherit; text-decoration: none; }
.u-topbar a:hover, .u-header a:hover, .u-mega a:hover, .u-home a:hover, .u-footer a:hover,
.u-topbar a:focus, .u-header a:focus, .u-mega a:focus, .u-home a:focus, .u-footer a:focus { color: inherit; text-decoration: none; }

/* โฟกัสที่มองเห็นชัด */
.u-header :focus-visible, .u-mega :focus-visible, .u-home :focus-visible, .u-skip:focus-visible, .u-top:focus-visible {
  outline: 3px solid var(--u-c1); outline-offset: 3px; border-radius: 6px;
}
.u-topbar :focus-visible, .u-hero :focus-visible, .u-media :focus-visible, .u-footer :focus-visible {
  outline: 3px solid var(--u-accent); outline-offset: 3px; border-radius: 6px;
}

.u-container { width: min(1280px, 100% - 2 * var(--u-gutter)); margin-inline: auto; }
#u-main { background: var(--u-bg); overflow-x: clip; }
#u-main:focus { outline: 0; }

.u-skip {
  position: absolute; inset-inline-start: 16px; top: -80px; z-index: 3000;
  background: #fff; color: var(--u-c1) !important; padding: 12px 20px; border-radius: 12px;
  font: 600 18px/1.4 var(--u-font); box-shadow: var(--u-shadow-3); transition: top 0.2s var(--u-ease);
}
.u-skip:focus { top: 16px; }

/* ---------- Top bar ---------- */
.u-topbar { background: var(--u-c1); color: var(--u-on1); font-size: 16px; }
.u-topbar__inner { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 52px; }
.u-topbar nav { min-width: 0; flex: 1 1 auto; }
.u-topbar__links { display: flex; align-items: center; overflow-x: auto; scrollbar-width: none; white-space: nowrap; }
.u-topbar__links li + li { border-inline-start: 1px solid rgb(255 255 255 / 0.3); }
.u-topbar__links a { display: inline-block; padding: 12px 16px; }
.u-topbar__links a:hover { color: var(--u-accent); }
.u-lang { display: flex; gap: 4px; background: rgb(255 255 255 / 0.14); border-radius: 999px; padding: 4px; flex: none; }
.u-lang a { padding: 2px 16px; border-radius: 999px; font-weight: 500; line-height: 1.6; }
.u-topbar .u-lang a[aria-current="true"], .u-topbar .u-lang a[aria-current="true"]:hover { background: #fff; color: var(--u-c1); font-weight: 600; }

/* ---------- Header ---------- */
.u-header {
  position: sticky; top: 0; z-index: 1020;
  container-type: scroll-state; container-name: u-hdr;
}
.u-header__bar { background: #fff; border-bottom: 1px solid var(--u-line); transition: box-shadow 0.25s; }
@container u-hdr scroll-state(stuck: top) {
  .u-header__bar { box-shadow: 0 8px 24px rgb(15 27 61 / 0.12); }
}
.u-header__inner { display: flex; align-items: center; gap: 24px; min-height: 76px; }

.u-brand { display: flex; align-items: center; gap: 16px; min-width: 0; flex: 0 1 auto; }
.u-brand__logo { height: 48px; width: auto; flex: none; }
.u-brand__text { display: grid; line-height: 1.25; min-width: 0; }
.u-brand__name { font-size: 18px; font-weight: 600; color: var(--u-c3); overflow-wrap: anywhere; }
.u-brand__sub { font-size: 14px; color: var(--u-muted); overflow-wrap: anywhere; }
.u-brand__img { height: 52px; width: auto; max-width: 100%; }

.u-burger {
  margin-inline-start: auto; width: 48px; height: 48px; flex: none;
  display: grid; place-content: center; gap: 5px; border-radius: 14px; background: var(--u-c1);
}
.u-burger span { display: block; width: 24px; height: 2px; background: var(--u-on1); border-radius: 2px; }

.u-scrim {
  position: fixed; inset: 0; z-index: 1030; background: rgb(8 15 35 / 0.55);
  opacity: 0; visibility: hidden; transition: opacity 0.3s, visibility 0.3s;
}
.u-scrim.is-open { opacity: 1; visibility: visible; }
html.u-lock { overflow: hidden; }

/* มือถือ/แท็บเล็ต: drawer เลื่อนจากขวา */
.u-nav {
  position: fixed; inset: 0 0 0 auto; z-index: 1040;
  width: min(380px, 90vw); background: #fff; padding: 16px;
  overflow-y: auto; overscroll-behavior: contain;
  transform: translateX(100%); visibility: hidden;
  transition: transform 0.3s var(--u-ease), visibility 0s linear 0.3s;
  box-shadow: var(--u-shadow-3);
}
.u-nav.is-open { transform: none; visibility: visible; transition-delay: 0s; }
.u-nav__close {
  display: grid; place-content: center; width: 48px; height: 48px;
  margin-inline-start: auto; margin-bottom: 8px; border-radius: 14px; font-size: 30px; line-height: 1;
}
.u-nav__close:hover { background: var(--u-tint); }
.u-nav__list { display: grid; gap: 4px; }
.u-nav__link {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  width: 100%; min-height: 52px; padding: 10px 14px; border-radius: 14px;
  font-size: 19px; font-weight: 500; color: var(--u-ink); text-align: start;
}
.u-nav__link:hover { background: var(--u-tint); color: var(--u-c1); }
.u-nav__toggle .fa { transition: rotate 0.2s; }
.u-nav__item.is-open > .u-nav__toggle { background: var(--u-tint); color: var(--u-c1); }
.u-nav__item.is-open > .u-nav__toggle .fa { rotate: 180deg; }
.u-acc { display: none; padding: 4px 0 12px 12px; }
.u-nav__item.is-open > .u-acc { display: block; }

/* กลุ่มลิงก์ (ใช้ทั้งใน mega menu และ accordion มือถือ) */
.u-grp { break-inside: avoid; margin-bottom: 28px; }
.u-grp__title { font-size: 20px; font-weight: 600; color: var(--u-c3); padding-bottom: 12px; margin-bottom: 14px !important; border-bottom: 3px solid var(--u-accent); line-height: 1.4; }
.u-grp__links a { display: block; padding: 6px 0; font-size: 19px; color: var(--u-ink); line-height: 1.5; }
.u-grp__links a:hover, .u-grp__title a:hover { color: var(--u-c1); text-decoration: underline; text-underline-offset: 5px; }
.u-acc .u-grp { margin-bottom: 12px; }
.u-acc .u-grp__title { font-size: 18px; padding: 8px 0 6px; margin-bottom: 4px !important; border-bottom-width: 2px; }
.u-acc .u-grp__links a { font-size: 17px; padding: 8px 0 8px 12px; }

/* mega menu: ซ่อนบนมือถือ */
.u-mega { display: none; }
.u-veil { display: none; }

/* ---------- เดสก์ท็อป ---------- */
@media (min-width: 1100px) {
  .u-header__inner { min-height: var(--u-header-h); gap: 40px; }
  .u-brand__logo { height: 60px; }
  .u-brand__name { font-size: 22px; }
  .u-brand__sub { font-size: 16px; }
  .u-brand__img { height: 64px; }
  .u-burger, .u-nav__close, .u-scrim { display: none; }

  .u-nav {
    position: static; inset: auto; width: auto; padding: 0; margin-inline-start: auto;
    transform: none; visibility: visible; overflow: visible; box-shadow: none; background: none;
  }
  .u-nav__list { display: flex; align-items: center; gap: 4px; }
  .u-nav__link {
    width: auto; min-height: 56px; padding: 10px 16px; border-radius: 14px 14px 0 0; white-space: nowrap; gap: 8px; justify-content: flex-start;
  }
  .u-nav__link:hover { background: none; color: var(--u-c1); }
  .u-nav__toggle[aria-expanded="true"] { color: var(--u-c1); background: none; box-shadow: inset 0 -4px 0 var(--u-accent); }
  .u-nav__item.is-open > .u-nav__toggle { background: none; }
  .u-acc { display: none !important; }

  .u-mega { position: absolute; inset-inline: 0; top: 100%; z-index: 2; }
  .u-mega:not([hidden]) { display: block; }
  .u-mega__box {
    display: grid; grid-template-columns: 300px minmax(0, 1fr) 340px;
    background: #fff; border-radius: 0 0 36px 36px; box-shadow: var(--u-shadow-3);
    overflow: hidden; max-height: calc(100vh - 190px);
  }
  .u-mega__box--nofeat { grid-template-columns: 300px minmax(0, 1fr); }
  .u-mega__rail { background: var(--u-bg); padding: 32px 24px; display: flex; flex-direction: column; gap: 10px; overflow-y: auto; }
  .u-mega__tab {
    display: block; width: 100%; text-align: start; border-radius: 22px; padding: 18px 22px;
    font-size: 22px; font-weight: 600; line-height: 1.3; color: var(--u-ink); background: transparent;
    transition: background-color 0.2s, color 0.2s;
  }
  .u-mega__tab:hover { background: var(--u-tint); }
  .u-mega__tab[aria-selected="true"] { background: var(--u-c1); color: var(--u-on1); }
  .u-mega__panes { padding: 40px 44px 16px; overflow-y: auto; }
  .u-pane__cols { column-count: 3; column-gap: 36px; }

  .u-mega__feat { padding: 32px 32px 32px 0; overflow-y: auto; }
  .u-feat {
    display: block; height: 100%; background: var(--u-warm); border-radius: 28px; padding: 20px;
    transition: box-shadow 0.25s, translate 0.25s var(--u-ease);
  }
  .u-feat:hover { box-shadow: var(--u-shadow-2); translate: 0 -3px; }
  .u-feat__media { height: 170px; border-radius: 20px; overflow: hidden; background: linear-gradient(45deg, var(--u-c1), var(--u-c3)); }
  .u-feat__media img { width: 100%; height: 100%; object-fit: cover; }
  .u-feat__media--logo img { object-fit: contain; padding: 36px; filter: brightness(0) invert(1); opacity: 0.25; }
  .u-feat__label { margin-top: 18px; font-size: 16px; font-weight: 600; color: var(--u-warm-ink); }
  .u-feat__title {
    margin-top: 2px; font-size: 23px; line-height: 1.4; font-weight: 600; color: var(--u-c3);
    display: -webkit-box; -webkit-line-clamp: 3; line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
  }
  .u-feat__date { margin-top: 6px; font-size: 17px; color: var(--u-muted); }
  .u-feat__more { margin-top: 14px; display: flex; align-items: center; gap: 8px; font-size: 18px; font-weight: 600; color: var(--u-c1); }

  .u-veil {
    display: block; position: fixed; inset: 0; z-index: 1010; background: rgb(8 15 35 / 0.58);
    opacity: 0; visibility: hidden; transition: opacity 0.25s, visibility 0.25s;
  }
  .u-veil.is-open { opacity: 1; visibility: visible; }
}
@media (min-width: 1100px) and (prefers-reduced-motion: no-preference) {
  .u-mega:not([hidden]) .u-mega__box { animation: u-drop 0.22s var(--u-ease); }
  @keyframes u-drop { from { opacity: 0; translate: 0 -8px; } }
}

/* ---------- ปุ่ม ---------- */
.u-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 52px; padding: 8px 28px; border-radius: 999px;
  font-size: 18px; font-weight: 600; border: 2px solid transparent; line-height: 1.3;
  transition: background-color 0.2s, color 0.2s, border-color 0.2s;
}
.u-btn--gold { background: var(--u-accent); color: var(--u-on-accent) !important; }
.u-btn--gold:hover { filter: brightness(1.06); }
.u-btn--navy { background: var(--u-c1); color: var(--u-on1) !important; }
.u-btn--navy:hover { background: var(--u-c3); }
.u-btn--outline { border-color: var(--u-c1); color: var(--u-c1) !important; }
.u-btn--outline:hover { background: var(--u-c1); color: var(--u-on1) !important; }
.u-btn--ghost { border-color: rgb(255 255 255 / 0.55); color: #fff !important; }
.u-btn--ghost:hover { background: #fff; color: var(--u-c1) !important; }
.u-link-more { display: inline-flex; align-items: center; gap: 10px; font-size: 20px; font-weight: 600; color: var(--u-c1); }
.u-link-more:hover { text-decoration: underline !important; text-underline-offset: 6px; }

/* ---------- Hero ---------- */
.u-hero {
  position: relative; overflow: hidden; background: var(--u-c2); color: var(--u-on2, var(--u-on1));
  border-radius: 0 0 36px 36px; padding: 44px 0 108px;
}
.u-hero__grid { display: grid; gap: 40px; align-items: center; grid-template-columns: minmax(0, 1fr); }
.u-hero__title { font-size: clamp(34px, 8vw, 44px); line-height: 1.2; font-weight: 600; letter-spacing: -0.3px; overflow-wrap: anywhere; }
.u-hero__sub { margin-top: 16px !important; font-size: clamp(20px, 4.5vw, 24px); line-height: 1.5; font-weight: 500; color: var(--u-accent); overflow-wrap: anywhere; }
.u-hero__ctrl { margin-top: 32px; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; font-size: 18px; }
.u-hero__btn {
  width: 48px; height: 48px; display: grid; place-content: center; border-radius: 50%;
  border: 1.5px solid rgb(255 255 255 / 0.55); color: inherit; font-size: 20px; line-height: 1;
  transition: background-color 0.2s, color 0.2s;
}
.u-hero__btn:hover { background: #fff; color: var(--u-c2); }
.u-hero__count { margin-inline-start: 4px; opacity: 0.85; font-variant-numeric: tabular-nums; }
.u-hero__count strong { font-weight: 600; opacity: 1; }

.u-hero__stage { position: relative; }
.u-hero__deco { position: absolute; left: -14px; top: -14px; width: 88px; height: 88px; border-radius: 50%; background: var(--u-accent); }
.u-hero__frame {
  position: relative; border-radius: 28px; overflow: hidden; background: var(--u-c2);
  box-shadow: var(--u-shadow-3); aspect-ratio: 16 / 10;
}
.u-hero__track {
  display: flex; height: 100%; overflow-x: auto; scroll-snap-type: x mandatory;
  scrollbar-width: none; overscroll-behavior-x: contain;
}
.u-hero__track::-webkit-scrollbar { display: none; }
@media (prefers-reduced-motion: no-preference) { .u-hero__track { scroll-behavior: smooth; } }
.u-hero__slide { position: relative; flex: 0 0 100%; scroll-snap-align: start; }
.u-hero__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.u-hero__cap {
  position: absolute; left: 16px; bottom: 16px; max-width: min(440px, calc(100% - 32px));
  background: #fff; color: var(--u-ink); border-radius: 20px; padding: 14px 20px;
  box-shadow: var(--u-shadow-2); display: grid; gap: 10px; justify-items: start;
}
.u-hero__cap-text { font-size: 18px; line-height: 1.45; font-weight: 600; color: var(--u-c3); overflow-wrap: anywhere; }
.u-hero__cap .u-btn { min-height: 44px; padding: 6px 22px; font-size: 17px; }

/* ---------- Quick links ---------- */
.u-quick { position: relative; z-index: 3; margin-top: -64px; }
.u-quick--flat { margin-top: 32px; }
.u-quick__grid { display: grid; gap: 14px; grid-template-columns: minmax(0, 1fr); }
.u-quick__card {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 16px; height: 100%;
  background: #fff; border-radius: 26px; padding: 18px 20px; box-shadow: var(--u-shadow-2);
  transition: translate 0.25s var(--u-ease), box-shadow 0.25s;
}
.u-quick__card:hover { translate: 0 -4px; box-shadow: 0 24px 48px rgb(15 27 61 / 0.2); }
.u-quick__icon {
  width: 60px; height: 60px; display: grid; place-content: center; border-radius: 19px;
  font-size: 28px; background: var(--u-tint); color: var(--u-c1);
}
.u-quick__item:nth-child(1) .u-quick__icon { background: var(--u-c1); color: var(--u-on1); }
.u-quick__item:nth-child(2) .u-quick__icon { background: var(--u-accent); color: var(--u-on-accent); }
.u-quick__item:nth-child(4) .u-quick__icon { background: var(--u-warm); color: var(--u-c1); }
.u-quick__title { display: block; font-size: 21px; font-weight: 600; line-height: 1.3; color: var(--u-ink); }
.u-quick__sub { display: block; margin-top: 2px; font-size: 16px; line-height: 1.45; color: var(--u-muted); }
.u-quick__go { display: none; align-items: center; gap: 10px; font-size: 18px; font-weight: 600; color: var(--u-c1); }
.u-quick__arrow { color: var(--u-c1); font-size: 24px; }

/* ---------- Sections ---------- */
.u-section { padding-block: clamp(48px, 7vw, 96px) 8px; }
.u-section--alt { background: #fff; padding-bottom: clamp(48px, 7vw, 96px); margin-top: clamp(32px, 5vw, 64px); }
.u-section__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; margin-bottom: clamp(24px, 4vw, 44px); }
.u-section__title { font-size: clamp(30px, 5vw, 52px); line-height: 1.2; font-weight: 600; color: var(--u-c3); overflow-wrap: anywhere; }
.u-richtext { overflow-wrap: anywhere; font-size: 18px; line-height: 1.75; }
.u-richtext img { max-width: 100%; height: auto; }
.u-richtext ul { list-style: disc; padding-inline-start: 1.5em; }
.u-richtext ol { list-style: decimal; padding-inline-start: 1.5em; }
.u-richtext p { margin: 0 0 1em; }

/* ---------- ข่าว ---------- */
.u-news { display: grid; gap: 28px; grid-template-columns: minmax(0, 1fr); }
.u-lead {
  position: relative; display: flex; flex-direction: column; background: #fff; border-radius: 28px; overflow: hidden;
  box-shadow: var(--u-shadow-1); transition: translate 0.25s var(--u-ease), box-shadow 0.25s;
}
.u-lead:hover { translate: 0 -4px; box-shadow: var(--u-shadow-2); }
.u-media-box { position: relative; background: linear-gradient(45deg, var(--u-c1), var(--u-c3)); overflow: hidden; }
.u-lead .u-media-box { aspect-ratio: 16 / 9; }
.u-media-box img { width: 100%; height: 100%; object-fit: cover; }
.u-media-box--logo img { object-fit: contain; padding: 14%; filter: brightness(0) invert(1); opacity: 0.22; }
/* ข่าวที่ 2-5 ไม่มีภาพ: พื้นไล่สี + โลโก้ขาวจาง ให้เหมือนข่าวที่ 1 */
.u-home .u-li__thumb.is-logo { background: linear-gradient(45deg, var(--u-c1), var(--u-c3)); }
.u-home .u-li__thumb.is-logo img { object-fit: contain; padding: 14%; filter: brightness(0) invert(1); opacity: 0.22; }
.u-home .u-li--thumb:hover .u-li__thumb.is-logo img { opacity: 0.32; }
.u-pill { position: absolute; left: 20px; top: 20px; background: var(--u-accent); color: var(--u-on-accent); border-radius: 999px; padding: 4px 18px; font-size: 16px; font-weight: 600; }
.u-lead__body { padding: 24px 24px 28px; display: grid; gap: 8px; }
.u-date { font-size: 17px; color: var(--u-muted); }
.u-lead__title { font-size: clamp(22px, 3vw, 32px); line-height: 1.4; font-weight: 600; }
.u-lead__title a::after, .u-hcard__title a::after, .u-feature__title a::after, .u-li__title a::after { content: ""; position: absolute; inset: 0; }
.u-lead__title a:hover, .u-li__title a:hover, .u-hcard__title a:hover { color: var(--u-c1); }

.u-news__list { display: flex; flex-direction: column; }
.u-li { position: relative; display: flex; gap: 20px; padding: 22px 0; border-bottom: 1.5px solid #ddd8cb; align-items: flex-start; }
.u-li:first-child { padding-top: 4px; }
.u-li:last-child { border-bottom: 0; padding-bottom: 0; }
.u-badge {
  flex: none; width: 76px; text-align: center; background: var(--u-c1); color: var(--u-on1); border-radius: 20px; padding: 10px 4px 8px;
}
.u-badge strong { display: block; font-size: 34px; line-height: 1.1; font-weight: 600; }
.u-badge span { display: block; font-size: 15px; line-height: 1.3; color: var(--u-accent); }
.u-li__title { font-size: 21px; line-height: 1.5; font-weight: 500; overflow-wrap: anywhere; }

/* ---------- Media & Video ---------- */
.u-media { margin-top: clamp(48px, 7vw, 96px); background: var(--u-c1); color: var(--u-on1); border-radius: 36px; padding: clamp(48px, 7vw, 96px) 0; }
.u-media .u-section__title { color: inherit; }
.u-media .u-link-more { color: var(--u-accent); }
.u-split { display: grid; gap: 28px; grid-template-columns: minmax(0, 1fr); }
.u-video { aspect-ratio: 16 / 9; border-radius: 26px; overflow: hidden; background: #000; box-shadow: var(--u-shadow-3); }
.u-video iframe { width: 100%; height: 100%; border: 0; display: block; }
.u-stack { display: grid; gap: 20px; align-content: start; }
.u-hcard {
  position: relative; display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 18px; align-items: center;
  background: rgb(255 255 255 / 0.1); border-radius: 24px; padding: 14px; transition: background-color 0.2s;
}
.u-hcard:hover { background: rgb(255 255 255 / 0.16); }
.u-hcard__img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 16px; background: var(--u-c2); }
.u-hcard__date { font-size: 15px; opacity: 0.8; }
.u-hcard__title { font-size: 19px; line-height: 1.45; font-weight: 500; overflow-wrap: anywhere; }
.u-hcard__title a:hover { color: var(--u-accent); }
.u-hcard__more { margin-top: 6px; font-size: 16px; font-weight: 600; color: var(--u-accent); }

/* ---------- ภาพกิจกรรม ---------- */
.u-acts { display: grid; gap: 20px; grid-template-columns: minmax(0, 1fr); }
.u-feature { position: relative; min-height: 300px; border-radius: 28px; overflow: hidden; background: linear-gradient(45deg, var(--u-c1), var(--u-c3)); transition: translate 0.25s var(--u-ease); }
.u-feature:hover { translate: 0 -4px; }
.u-feature img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.u-feature--logo img { object-fit: contain; padding: 18%; filter: brightness(0) invert(1); opacity: 0.2; }
.u-feature__cap { position: absolute; inset-inline: 14px; bottom: 14px; background: #fff; border-radius: 20px; padding: 12px 20px; }
.u-feature__title { font-size: 20px; line-height: 1.4; font-weight: 600; overflow-wrap: anywhere; }
.u-feature__title a:hover { color: var(--u-c1); }
.u-acts__stack { display: grid; gap: 20px; grid-template-rows: 1fr 1fr; }
.u-acts__stack .u-feature { min-height: 220px; }
.u-acts__cta {
  border-radius: 28px; background: var(--u-c1); color: var(--u-on1); padding: 28px; display: flex; flex-direction: column;
  justify-content: flex-end; align-items: flex-start; gap: 20px; min-height: 220px;
}
.u-acts__cta p { font-size: 24px; line-height: 1.4; font-weight: 600; }

/* ---------- Contact ---------- */
.u-contact-wrap { margin-top: clamp(48px, 7vw, 96px); }
.u-contact {
  background: var(--u-accent); color: var(--u-on-accent); border-radius: 32px; padding: 32px 26px;
  display: flex; flex-direction: column; gap: 24px; align-items: flex-start; justify-content: space-between;
}
.u-contact__name { font-size: clamp(28px, 4.5vw, 48px); line-height: 1.2; font-weight: 600; overflow-wrap: anywhere; }
.u-contact__en { margin-top: 6px !important; font-size: clamp(18px, 2.4vw, 24px); font-weight: 500; overflow-wrap: anywhere; }

/* ---------- Footer ---------- */
.u-footer { margin-top: clamp(48px, 7vw, 96px); background: var(--u-c4); color: var(--u-on4); border-radius: 36px 36px 0 0; padding-top: 48px; }
.u-footer__top { display: flex; flex-wrap: wrap; gap: 40px 48px; }
.u-footer__brand { flex: 1.4 1 280px; min-width: 0; }
.u-footer__brandrow { display: flex; align-items: center; gap: 16px; }
.u-footer__logo { height: 56px; width: auto; flex: none; }
.u-footer__name { font-size: 22px; font-weight: 600; line-height: 1.3; overflow-wrap: anywhere; }
.u-footer__addr { margin-top: 20px !important; font-size: 18px; line-height: 1.7; opacity: 0.85; max-width: 380px; overflow-wrap: anywhere; }
.u-footer__col { flex: 1 1 200px; min-width: 0; }
.u-footer__title { font-size: 20px !important; font-weight: 600; color: var(--u-accent); margin-bottom: 18px !important; }
.u-footer__links { display: grid; gap: 6px; }
.u-footer__links a { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 6px 0; font-size: 18px; opacity: 0.9; }
.u-footer__links a:hover { opacity: 1; text-decoration: underline !important; text-underline-offset: 5px; }
.u-footer__bottom {
  margin-top: 48px; padding-block: 24px 28px; border-top: 1px solid rgb(255 255 255 / 0.2);
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; font-size: 16px; opacity: 0.9;
}
.u-footer__count { display: flex; align-items: center; gap: 12px; }
.u-footer__admin { display: inline-grid; place-content: center; width: 44px; height: 44px; border-radius: 50%; }
.u-footer__admin:hover { background: rgb(255 255 255 / 0.15); }

.u-top {
  position: fixed; inset-inline-end: 16px; bottom: 16px; z-index: 1010; width: 52px; height: 52px;
  display: grid; place-content: center; border-radius: 50%; background: var(--u-c1); color: var(--u-on1);
  font-size: 26px; box-shadow: var(--u-shadow-3); border: 0; cursor: pointer;
  opacity: 0; visibility: hidden; translate: 0 8px; transition: opacity 0.25s, translate 0.25s, visibility 0.25s;
}
.u-top.is-visible { opacity: 1; visibility: visible; translate: 0 0; }

/* ---------- Scroll-driven reveal (ถ้ารองรับ) ---------- */
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .u-reveal { animation: u-rise linear both; animation-timeline: view(); animation-range: entry 0% entry 35%; }
    @keyframes u-rise { from { opacity: 0; translate: 0 24px; } to { opacity: 1; translate: 0 0; } }
  }
}
@media (prefers-reduced-motion: reduce) {
  .u-lead, .u-quick__card, .u-feature, .u-feat, .u-nav, .u-top, .u-skip, .u-scrim { transition: none; }
  .u-lead:hover, .u-quick__card:hover, .u-feature:hover, .u-feat:hover { translate: none; }
}

/* ==========================================================================
   จอใหญ่ขึ้น
   ========================================================================== */
@media (min-width: 700px) {
  .u-quick__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .u-hero__deco { left: -20px; top: -20px; width: 110px; height: 110px; }
  .u-hero__cap { left: 24px; bottom: 24px; padding: 16px 24px; }
  .u-hero__cap-text { font-size: 20px; }
  .u-acts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .u-acts .u-feature--lead { grid-column: 1 / -1; min-height: 380px; }
  .u-contact { padding: 44px 48px; flex-direction: row; align-items: center; }
  .u-footer__top { gap: 40px 56px; }
}
@media (min-width: 1100px) {
  .u-hero { border-radius: 0 0 56px 56px; padding: 80px 0 150px; }
  .u-hero__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: 56px; }
  .u-hero--solo .u-hero__grid { grid-template-columns: minmax(0, 1fr); }
  .u-hero__title { font-size: clamp(40px, 4.4vw, 64px); }
  .u-hero__sub { font-size: clamp(22px, 2vw, 26px); }
  .u-hero__deco { left: -28px; top: -28px; width: 140px; height: 140px; }
  .u-hero__frame { border-radius: 36px; }
  .u-hero__cap { max-width: 420px; }

  .u-quick { margin-top: -84px; }
  .u-quick__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
  .u-quick__card { grid-template-columns: minmax(0, 1fr); align-content: start; gap: 18px; border-radius: 30px; padding: 30px 30px 26px; }
  .u-quick__icon { width: 68px; height: 68px; border-radius: 22px; font-size: 32px; }
  .u-quick__title { font-size: 24px; }
  .u-quick__sub { font-size: 17px; margin-top: 6px; }
  .u-quick__go { display: flex; }
  .u-quick__arrow { display: none; }

  .u-news { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 48px; }
  .u-lead { border-radius: 32px; }
  .u-lead .u-media-box { aspect-ratio: 16 / 8.5; }
  .u-lead__body { padding: 30px 36px 36px; }
  .u-badge { width: 84px; border-radius: 22px; padding: 12px 4px 10px; }
  .u-badge strong { font-size: 38px; }
  .u-badge span { font-size: 16px; }
  .u-li { gap: 24px; padding: 28px 0; }
  .u-li__title { font-size: 24px; }

  .u-media { border-radius: 56px; }
  .u-split { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 40px; align-items: start; }
  .u-hcard { grid-template-columns: 150px minmax(0, 1fr); gap: 24px; border-radius: 28px; padding: 20px; }
  .u-hcard__title { font-size: 23px; }
  .u-hcard__date { font-size: 16px; }

  .u-acts { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr) minmax(0, 1fr); gap: 24px; }
  .u-acts .u-feature--lead { grid-column: auto; min-height: 520px; }
  .u-acts__stack { gap: 24px; }
  .u-acts__cta { min-height: 520px; padding: 32px; }
  .u-feature { border-radius: 32px; }
  .u-feature__cap { inset-inline: 20px; bottom: 20px; padding: 14px 22px; }
  .u-feature__title { font-size: 22px; }
  .u-acts__stack .u-feature .u-feature__title { font-size: 20px; }
  .u-acts__stack .u-feature { min-height: 0; }

  .u-contact { border-radius: 44px; padding: 64px 72px; }
  .u-footer { border-radius: 56px 56px 0 0; padding-top: 80px; }
}

/* ---------- เสริม: กรณีข้อมูลน้อย / อ่านออกเสียง ---------- */
.u-sr-date { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
@media (min-width: 1100px) {
  .u-news--solo { grid-template-columns: minmax(0, 1fr); }
  .u-news--solo .u-lead { max-width: 760px; }
  .u-acts--2 { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); }
}

/* ---------- ปรับ mega menu: แคบลง + ตัวอักษรเล็กลง 20% ---------- */
@media (min-width: 1100px) {
  .u-mega__box { grid-template-columns: 230px minmax(0, 1fr) 270px; }
  .u-mega__box--nofeat { grid-template-columns: 230px minmax(0, 1fr); }
  .u-mega__rail { padding: 28px 18px; gap: 8px; }
  .u-mega__tab { font-size: 17.6px; padding: 14px 18px; border-radius: 18px; }
  .u-mega__panes { padding: 32px 36px 12px; }
  .u-mega .u-grp__title { font-size: 16px; padding-bottom: 10px; margin-bottom: 10px !important; }
  .u-mega .u-grp__links a { font-size: 15.2px; padding: 5px 0; }
  .u-mega__feat { padding: 24px 24px 24px 0; }
  .u-feat { padding: 16px; border-radius: 24px; }
  .u-feat__media { height: 140px; border-radius: 16px; }
  .u-feat__label { font-size: 13px; margin-top: 14px; }
  .u-feat__title { font-size: 18.4px; }
  .u-feat__date { font-size: 13.6px; }
  .u-feat__more { font-size: 14.4px; }
}

/* กันสไลด์ยุบเป็น 0 ถ้า aspect-ratio ไม่ทำงาน / CSS เก่าค้างแคช */
.u-hero__track { min-height: 220px; width: 100%; }
.u-hero__slide { min-height: 220px; }

/* ---------- หมวดข่าว: ลดขนาดตัวอักษร 20% ---------- */
.u-section__title { font-size: clamp(24px, 4vw, 41.6px); }
.u-lead__title { font-size: clamp(17.6px, 2.4vw, 25.6px); }
.u-li__title { font-size: 16.8px; }
.u-date { font-size: 13.6px; }
.u-lead__body { padding: 20px 22px 24px; }
@media (min-width: 1100px) {
  .u-li__title { font-size: 19.2px; }
  .u-lead__body { padding: 24px 30px 28px; }
}

/* ---------- Media & Video / ภาพกิจกรรม: ลดขนาดตัวอักษร 20% ---------- */
.u-link-more { font-size: 16px; }
.u-hcard__title { font-size: 15.2px; }
.u-hcard__date { font-size: 12px; }
.u-hcard__more { font-size: 12.8px; }
.u-feature__title { font-size: 16px; }
.u-acts__cta p { font-size: 19.2px; }
@media (min-width: 1100px) {
  .u-hcard__title { font-size: 18.4px; }
  .u-hcard__date { font-size: 12.8px; }
  .u-feature__title, .u-acts__stack .u-feature .u-feature__title { font-size: 17.6px; }
}

/* ---------- Footer: กะทัดรัด รองรับเมนูจำนวนมาก + ตัวอักษรเล็กลง ---------- */
.u-footer { padding-top: 32px; }
.u-footer__top { gap: 16px 32px; }
.u-footer__brand { flex: 1 1 100%; }
.u-footer__logo { height: 40px; }
.u-footer__name { font-size: 14px; }
.u-footer__addr { margin-top: 8px !important; font-size: 11px; line-height: 1.6; max-width: none; }
.u-footer__menus {
  margin-top: 24px; padding-top: 24px; border-top: 1px solid rgb(255 255 255 / 0.2);
  column-width: 210px; column-gap: 28px;
}
.u-footer__col { display: inline-block; width: 100%; break-inside: avoid; margin: 0 0 22px; flex: none; }
.u-footer__title { font-size: 11px !important; line-height: 1.5; margin-bottom: 8px !important; padding-bottom: 6px; border-bottom: 1px solid rgb(255 255 255 / 0.2); }
.u-footer__links { gap: 0; }
.u-footer__links a { display: block; padding: 3px 0; font-size: 11px; line-height: 1.5; opacity: 0.9; }
.u-footer__more { margin-top: 2px; }
.u-footer__more summary { cursor: pointer; padding: 4px 0; font-size: 11px; font-weight: 600; color: var(--u-accent); list-style: none; }
.u-footer__more summary::-webkit-details-marker { display: none; }
.u-footer__more summary::before { content: "+ "; }
.u-footer__more[open] summary::before { content: "− "; }
.u-footer__bottom { margin-top: 16px; padding-block: 16px 20px; font-size: 11px; }
.u-footer__admin { width: 36px; height: 36px; font-size: 11px; }
.u-footer :focus-visible { outline-offset: 2px; }
@media (min-width: 1100px) { .u-footer { padding-top: 48px; } }
.u-footer__menus { column-width: auto; display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 8px 28px; align-items: start; }
.u-footer__col { display: block; margin: 0 0 14px; }

/* ---------- Footer: ขยายตัวอักษรเพิ่ม 15% ---------- */
.u-footer__name { font-size: 16.1px; }
.u-footer__addr, .u-footer__title, .u-footer__links a, .u-footer__more summary, .u-footer__bottom, .u-footer__admin { font-size: 12.65px; }
.u-footer__title { font-size: 12.65px !important; }

/* ==========================================================================
   Hero (แบบ v3 แรก): ชื่อเว็บซ้าย + สไลด์ขวา มีการ์ดข้อความซ้อนบนรูป
   - ข้อความใน hero เล็กลง 40%
   - สไลด์กว้างขึ้น: คอลัมน์ข้อความแคบลง สัดส่วนภาพ 16:10 (มือถือ/แท็บเล็ต) และ 16:9 (เดสก์ท็อป)
   ========================================================================== */
.u-hero__title { font-size: clamp(20.4px, 4.8vw, 26.4px); }
.u-hero__sub { font-size: clamp(12px, 2.7vw, 14.4px); margin-top: 8px !important; }
.u-hero__ctrl { position: static; margin-top: 20px; font-size: 11px; }
.u-hero__count { font-size: 11px; }
.u-hero__cap { padding: 10px 14px; gap: 8px; max-width: min(300px, calc(100% - 24px)); left: 12px; bottom: 12px; border-radius: 14px; }
.u-hero__cap-text { font-size: 11px; line-height: 1.5; }
.u-hero__cap .u-btn { min-height: 28px; padding: 2px 14px; font-size: 11px; border-width: 1.5px; }
.u-hero__frame { aspect-ratio: 16 / 10; }
.u-hero__track { min-height: 0; }
.u-hero__slide { min-height: 0; }
@media (min-width: 700px) {
  .u-hero__cap { padding: 12px 18px; max-width: 320px; left: 20px; bottom: 20px; }
  .u-hero__cap-text { font-size: 12px; }
  .u-hero__cap .u-btn { font-size: 12px; min-height: 30px; }
}
@media (min-width: 1100px) {
  .u-hero { padding: 56px 0 130px; }
  .u-hero__grid { grid-template-columns: minmax(0, 0.7fr) minmax(0, 2fr); gap: 40px; }
  .u-hero--solo .u-hero__grid { grid-template-columns: minmax(0, 1fr); }
  .u-hero__title { font-size: clamp(24px, 2.64vw, 38.4px); }
  .u-hero__sub { font-size: clamp(13.2px, 1.2vw, 15.6px); }
  .u-hero__frame { aspect-ratio: 16 / 9; }
  .u-hero__cap { max-width: 340px; left: 28px; bottom: 28px; }
}

/* คำโปรยใน hero ใช้สีตัวอักษรจาก DB (font_color1 -> --u-f1) */
.u-hero__sub { color: var(--u-f1); }

/* ป้ายวันที่: เดือน/ปีใช้สีเดียวกับตัวเลขวัน (อ่านออกบนทุกสีพื้น) */
.u-badge span { color: inherit; }

/* ==========================================================================
   หน้ารายละเอียดข่าว (news_bk_v3.php): พื้นขาว ฟอนต์ธีมหลัก (Prompt)
   ========================================================================== */
.u-page { background: #fff; padding-block: clamp(24px, 4vw, 56px) 8px; }
#u-main:has(.u-page) { background: #fff; }
.u-art { max-width: 920px; }
.u-crumb ol { display: flex; flex-wrap: wrap; gap: 4px 8px; font-size: 14px; color: var(--u-muted); }
.u-crumb li + li::before { content: "/"; margin-right: 8px; opacity: 0.5; }
.u-crumb a { color: var(--u-c1); }
.u-crumb a:hover { text-decoration: underline !important; text-underline-offset: 4px; }
.u-art__head { margin: 20px 0 24px; display: grid; gap: 12px; justify-items: start; }
.u-pill--inline { position: static; display: inline-block; }
.u-art__title { font-size: clamp(22px, 3.2vw, 36px); line-height: 1.35; font-weight: 600; color: var(--u-c3); overflow-wrap: anywhere; }
.u-art__meta { display: flex; flex-wrap: wrap; gap: 6px 22px; font-size: 14px; color: var(--u-muted); padding-top: 12px; border-top: 1px solid var(--u-line); width: 100%; }
.u-art__meta .fa { color: var(--u-c1); margin-right: 4px; }
.u-art__cover { margin: 0 0 28px; border-radius: 24px; overflow: hidden; background: var(--u-tint); }
.u-art__cover img { display: block; width: 100%; height: auto; }
.u-art__body { font-size: 17px; line-height: 1.85; color: var(--u-ink); }
.u-art__body a { color: var(--u-c1) !important; text-decoration: underline !important; text-underline-offset: 3px; }
.u-art__body img { border-radius: 12px; }
.u-art__body table { max-width: 100%; }
.u-art__attach, .u-art__gallery { margin-top: 32px; padding-top: 24px; border-top: 1px solid var(--u-line); }
.u-art__attach h2, .u-art__gallery h2 { font-size: 18px; font-weight: 600; color: var(--u-c3); margin-bottom: 14px; }
.u-art__attach h2 .fa, .u-art__gallery h2 .fa { color: var(--u-c1); margin-right: 6px; }
.u-art__attach ul { display: flex; flex-wrap: wrap; gap: 10px; }
.u-chip { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 6px 18px; border-radius: 999px; background: var(--u-tint); color: var(--u-c1) !important; font-size: 15px; font-weight: 500; transition: background-color 0.2s, color 0.2s; }
.u-chip:hover { background: var(--u-c1); color: var(--u-on1) !important; }
.u-art__gallery ul { display: grid; gap: 12px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.u-art__gallery a { display: block; border-radius: 16px; overflow: hidden; aspect-ratio: 4 / 3; background: var(--u-tint); }
.u-art__gallery img { width: 100%; height: 100%; object-fit: cover; transition: scale 0.3s var(--u-ease); }
.u-art__gallery a:hover img { scale: 1.05; }
.u-art__back { margin-top: 40px; }
@media (min-width: 700px) { .u-art__gallery ul { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .u-art__gallery ul { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; } .u-art__body { font-size: 18px; } }
@media (prefers-reduced-motion: reduce) { .u-art__gallery img { transition: none; } .u-art__gallery a:hover img { scale: none; } }

/* ---------- แถบด้านข้างหมวดข่าว ---------- */
.u-art-layout { display: grid; gap: 40px; grid-template-columns: minmax(0, 1fr); align-items: start; }
.u-art { max-width: none; width: 100%; min-width: 0; }
.u-side { background: var(--u-bg); border-radius: 24px; padding: 22px 20px; }
.u-side__title { font-size: 18px; font-weight: 600; color: var(--u-c3); padding-bottom: 10px; margin-bottom: 8px !important; border-bottom: 3px solid var(--u-accent); }
.u-side__link { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 44px; padding: 8px 12px; border-radius: 14px; font-size: 15.5px; color: var(--u-ink); transition: background-color 0.2s, color 0.2s; }
.u-side__link:hover { background: var(--u-tint); color: var(--u-c1); }
.u-side__link.is-current { background: var(--u-c1); color: var(--u-on1) !important; font-weight: 600; }
.u-side__cnt { flex: none; min-width: 28px; padding: 0 8px; border-radius: 999px; background: #fff; color: var(--u-c1); font-size: 13px; text-align: center; line-height: 24px; }
@media (min-width: 1100px) {
  .u-art-layout { grid-template-columns: minmax(0, 1fr) 300px; gap: 48px; }
  .u-side { position: sticky; top: 120px; }
}

/* ---------- Footer: ใช้สีตัวอักษรจาก DB (font_color1 -> --u-f1) ทั้งหมด ---------- */
.u-footer, .u-footer__name, .u-footer__addr, .u-footer__title, .u-footer__links a,
.u-footer__more summary, .u-footer__bottom, .u-footer__bottom p, .u-footer__count, .u-footer__admin { color: var(--u-f1) !important; }
.u-footer__addr, .u-footer__addr *, .u-footer__links a, .u-footer__bottom { opacity: 1; }
.u-footer__addr *:not(img):not(svg) { color: inherit !important; }
.u-footer__title { border-bottom-color: currentColor; }
.u-footer__bottom, .u-footer__menus { border-color: color-mix(in srgb, var(--u-f1) 35%, transparent); }
.u-footer__links a:hover { text-decoration: underline !important; text-underline-offset: 4px; }

/* ---------- หน้าวิดีโอ (media_bk_v3.php) ---------- */
.u-sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.u-vpage ul, .u-vpage li { list-style: none; margin: 0; padding: 0; }
.u-vpage .u-vtitle { margin: 6px 0 20px; font-size: clamp(20px, 3vw, 28px); line-height: 1.35; font-weight: 600; text-transform: none; letter-spacing: 0; color: var(--u-c3); overflow-wrap: anywhere; }
.u-vpage .u-vwatch { max-width: 960px; }
.u-vpage .u-vwatch__player { margin-bottom: 20px; }
.u-vpage .u-vwatch__detail { font-size: 15.5px; line-height: 1.8; margin-bottom: 8px; }
.u-vpage .u-vwatch__meta { margin-top: 18px; padding-top: 12px; border-top: 1px solid var(--u-line); font-size: 13.5px; color: var(--u-muted); }
.u-vpage .u-vwatch__meta .fa { color: var(--u-c1); margin-right: 4px; }

.u-vpage .u-vlist { margin-top: 36px; padding-top: 24px; border-top: 1px solid var(--u-line); }
.u-vpage .u-vlist__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 24px; margin-bottom: 20px; }
.u-vpage .u-vlist__title { margin: 0; font-size: clamp(16px, 2vw, 20px); font-weight: 600; color: var(--u-c3); padding-bottom: 6px; border-bottom: 3px solid var(--u-accent); }

.u-vpage .u-vsearch { display: flex; width: 100%; max-width: 340px; margin: 0; border: 1.5px solid var(--u-line); border-radius: 999px; background: #fff; overflow: hidden; transition: border-color 0.2s, box-shadow 0.2s; }
.u-vpage .u-vsearch:focus-within { border-color: var(--u-c1); box-shadow: 0 0 0 3px color-mix(in srgb, var(--u-c1) 18%, transparent); }
.u-vpage .u-vsearch input { flex: 1; min-width: 0; height: 44px; padding: 0 18px; border: 0; border-radius: 0; box-shadow: none; background: transparent; font: inherit; font-size: 14.5px; color: var(--u-ink); outline: none; }
.u-vpage .u-vsearch button { flex: none; width: 52px; height: 44px; padding: 0; border: 0; border-radius: 0; background: var(--u-c1); color: var(--u-on1); font-size: 15px; cursor: pointer; transition: filter 0.2s; }
.u-vpage .u-vsearch button:hover { filter: brightness(1.12); }

.u-vpage .u-vgrid { display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr); }
.u-vpage .u-vcard { position: relative; height: 100%; display: flex; flex-direction: column; background: #fff; border: 1px solid var(--u-line); border-radius: 18px; overflow: hidden; transition: box-shadow 0.25s, translate 0.25s; }
.u-vpage .u-vcard:hover { box-shadow: var(--u-shadow-2); translate: 0 -3px; }
.u-vpage .u-vcard.is-current { border-color: var(--u-c1); box-shadow: 0 0 0 2px var(--u-c1); }
.u-vpage .u-vcard__thumb { position: relative; aspect-ratio: 16 / 9; background: linear-gradient(45deg, var(--u-c1), var(--u-c3)); overflow: hidden; }
.u-vpage .u-vcard__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.u-vpage .u-vcard__play { position: absolute; inset: 0; margin: auto; width: 44px; height: 44px; display: grid; place-content: center; border-radius: 50%; background: var(--u-accent); color: var(--u-on-accent); font-size: 15px; padding-left: 3px; box-shadow: var(--u-shadow-2); }
.u-vpage .u-vcard__body { padding: 12px 14px 14px; display: grid; gap: 4px; align-content: start; }
.u-vpage .u-vcard__title { margin: 0; font-size: 14.5px; line-height: 1.5; font-weight: 500; color: var(--u-ink); overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.u-vpage .u-vcard__title a { color: inherit; }
.u-vpage .u-vcard__title a::after { content: ""; position: absolute; inset: 0; }
.u-vpage .u-vcard__title a:hover { color: var(--u-c1); }
.u-vpage .u-vcard__date { font-size: 12.5px; color: var(--u-muted); }
.u-vpage .u-vempty { padding: 32px 0; color: var(--u-muted); text-align: center; }
@media (min-width: 520px) { .u-vpage .u-vgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 820px) { .u-vpage .u-vgrid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; } }
@media (min-width: 1180px) { .u-vpage .u-vgrid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; } .u-vpage .u-vcard__title { font-size: 15px; } }
@media (prefers-reduced-motion: reduce) { .u-vpage .u-vcard, .u-vpage .u-vsearch { transition: none; } .u-vpage .u-vcard:hover { translate: none; } }

/* ---------- คลังเอกสาร (document_v3 / document_list_v3 / document_search_v3) ---------- */
.u-dpage ul, .u-dpage li { list-style: none; margin: 0; padding: 0; }
.u-dpage [hidden] { display: none !important; }
.u-dpage .u-dhead { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; margin: 6px 0 24px; }
.u-dpage .u-dtitle { margin: 0; font-size: clamp(20px, 3vw, 28px); line-height: 1.35; font-weight: 600; text-transform: none; letter-spacing: 0; color: var(--u-c3); overflow-wrap: anywhere; }
.u-dpage .u-dtitle .fa { color: var(--u-c1); margin-right: 6px; }
.u-dpage .u-dbtn { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 20px; border-radius: 999px; border: 1.5px solid var(--u-c1); font-size: 14.5px; font-weight: 500; color: var(--u-c1) !important; text-decoration: none !important; transition: background-color 0.2s, color 0.2s; }
.u-dpage .u-dbtn:hover { background: var(--u-c1); color: var(--u-on1) !important; }

.u-dpage .u-dgrid { display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr); align-items: start; }
.u-dpage .u-dcard, .u-dpage .u-dpanel { background: #fff; border: 1px solid var(--u-line); border-radius: 20px; padding: 18px 20px; }
.u-dpage .u-dpanel { margin-bottom: 16px; }
.u-dpage .u-dcard__title, .u-dpage .u-dpanel__title { margin: 0 0 10px; display: flex; align-items: flex-start; gap: 10px; font-size: 16px; line-height: 1.45; font-weight: 600; color: var(--u-c3); padding-bottom: 10px; border-bottom: 2px solid var(--u-accent); overflow-wrap: anywhere; }
.u-dpage .u-dcard__title .fa, .u-dpage .u-dpanel__title .fa { color: var(--u-c1); margin-top: 3px; }
.u-dpage .u-dcard__title a, .u-dpage .u-dpanel__title a { color: inherit; }
.u-dpage .u-dcard__title a:hover { color: var(--u-c1); text-decoration: underline; text-underline-offset: 4px; }

.u-dpage .u-dlist { display: grid; gap: 2px; }
.u-dpage .u-dlist li { display: flex; align-items: flex-start; gap: 10px; padding: 8px 10px; border-radius: 12px; font-size: 14.5px; line-height: 1.55; color: var(--u-ink); transition: background-color 0.2s; }
.u-dpage .u-dlist li:hover { background: var(--u-tint); }
.u-dpage .u-dlist li > .fa { flex: none; margin-top: 4px; color: var(--u-c1); width: 16px; text-align: center; }
.u-dpage .u-dlist a { color: inherit; overflow-wrap: anywhere; }
.u-dpage .u-dlist a:hover { color: var(--u-c1); text-decoration: underline; text-underline-offset: 3px; }

.u-dpage .u-dmore { margin-top: 10px; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px; border: 1.5px solid var(--u-line); border-radius: 999px; background: #fff; font: inherit; font-size: 14px; font-weight: 500; color: var(--u-c1); cursor: pointer; transition: background-color 0.2s, border-color 0.2s; }
.u-dpage .u-dmore:hover { background: var(--u-tint); border-color: var(--u-c1); }
.u-dpage .u-dmore span { color: var(--u-muted); font-weight: 400; }
.u-dpage .u-dmore .fa { transition: rotate 0.2s; }
.u-dpage .u-dmore.is-open .fa { rotate: 180deg; }
.u-dpage .u-dempty { padding: 32px 0; color: var(--u-muted); text-align: center; }

.u-dpage .u-dsearch { margin: 0 0 20px; display: grid; gap: 8px; max-width: 720px; }
.u-dpage .u-dsearch__label { font-size: 15px; font-weight: 600; color: var(--u-c3); }
.u-dpage .u-dsearch__row { display: flex; border: 1.5px solid var(--u-line); border-radius: 999px; background: #fff; overflow: hidden; transition: border-color 0.2s, box-shadow 0.2s; }
.u-dpage .u-dsearch__row:focus-within { border-color: var(--u-c1); box-shadow: 0 0 0 3px color-mix(in srgb, var(--u-c1) 18%, transparent); }
.u-dpage .u-dsearch input { flex: 1; min-width: 0; height: 48px; padding: 0 20px; border: 0; border-radius: 0; box-shadow: none; background: transparent; font: inherit; font-size: 15px; color: var(--u-ink); outline: none; }
.u-dpage .u-dsearch button { flex: none; height: 48px; padding: 0 22px; border: 0; border-radius: 0; background: var(--u-c1); color: var(--u-on1); font: inherit; font-size: 14.5px; font-weight: 500; cursor: pointer; transition: filter 0.2s; }
.u-dpage .u-dsearch button:hover { filter: brightness(1.12); }
.u-dpage .u-dcount { margin: 0 0 10px; font-size: 13.5px; color: var(--u-muted); }
.u-dpage .u-dres { display: grid; gap: 2px; min-width: 0; }
.u-dpage .u-dres__cat { font-size: 12.5px; color: var(--u-muted); }

@media (min-width: 640px) { .u-dpage .u-dgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .u-dpage .u-dgrid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; } .u-dpage .u-dcard__title, .u-dpage .u-dpanel__title { font-size: 17px; } }
@media (prefers-reduced-motion: reduce) { .u-dpage .u-dlist li, .u-dpage .u-dbtn, .u-dpage .u-dmore, .u-dpage .u-dmore .fa, .u-dpage .u-dsearch__row { transition: none; } }

/* ---------- หมวดข่าว (news_category_v3 / news_sidebar_v3) ---------- */
.u-npage ul, .u-npage li { list-style: none; margin: 0; padding: 0; }
.u-npage .u-nhead { margin: 6px 0 22px; }
.u-npage .u-ntitle { margin: 0; font-size: clamp(20px, 3vw, 28px); line-height: 1.35; font-weight: 600; text-transform: none; letter-spacing: 0; color: var(--u-c3); overflow-wrap: anywhere; }
.u-npage .u-ncount { margin: 6px 0 0; font-size: 13.5px; color: var(--u-muted); }

.u-npage .u-ngrid { display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr); }
.u-npage .u-ncard { position: relative; height: 100%; display: flex; flex-direction: column; background: #fff; border: 1px solid var(--u-line); border-radius: 18px; overflow: hidden; transition: box-shadow 0.25s, translate 0.25s; }
.u-npage .u-ncard:hover { box-shadow: var(--u-shadow-2); translate: 0 -3px; }
.u-npage .u-ncard__thumb { aspect-ratio: 16 / 10; background: var(--u-tint); overflow: hidden; }
.u-npage .u-ncard__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.u-npage .u-ncard__thumb.is-logo img { object-fit: contain; padding: 12%; opacity: 0.85; }
.u-npage .u-ncard__body { padding: 12px 14px 14px; display: grid; gap: 6px; align-content: start; }
.u-npage .u-ncard__title { margin: 0; font-size: 14.5px; line-height: 1.55; font-weight: 500; color: var(--u-ink); overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.u-npage .u-ncard__title a { color: inherit; }
.u-npage .u-ncard__title a::after { content: ""; position: absolute; inset: 0; }
.u-npage .u-ncard__title a:hover { color: var(--u-c1); }
.u-npage .u-ncard__date { font-size: 12.5px; color: var(--u-muted); }
.u-npage .u-ncard__date .fa { color: var(--u-c1); margin-right: 3px; }
.u-npage .u-nempty { padding: 32px 0; color: var(--u-muted); text-align: center; }

.u-npage .u-pager { margin-top: 32px; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.u-npage .u-pager__a { min-width: 44px; height: 44px; padding: 0 12px; display: inline-grid; place-content: center; border: 1.5px solid var(--u-line); border-radius: 14px; background: #fff; font-size: 14.5px; color: var(--u-ink) !important; text-decoration: none !important; transition: background-color 0.2s, border-color 0.2s; }
.u-npage a.u-pager__a:hover { background: var(--u-tint); border-color: var(--u-c1); }
.u-npage .u-pager__a.is-current { background: var(--u-c1); border-color: var(--u-c1); color: var(--u-on1) !important; font-weight: 600; }

.u-npage .u-nside { display: grid; gap: 16px; }
.u-npage .u-nside__block { background: var(--u-bg); border-radius: 24px; padding: 22px 20px; }
.u-npage .u-nside .u-side__title { margin: 0 0 10px; }
.u-npage .u-side__list { display: grid; gap: 2px; }
.u-npage .u-side__link .fa { color: var(--u-c1); font-size: 16px; }
.u-npage .u-side__link.is-current .fa { color: inherit; }
.u-npage .u-nsearch { display: flex; border: 1.5px solid var(--u-line); border-radius: 999px; background: #fff; overflow: hidden; transition: border-color 0.2s, box-shadow 0.2s; margin: 0; }
.u-npage .u-nsearch:focus-within { border-color: var(--u-c1); box-shadow: 0 0 0 3px color-mix(in srgb, var(--u-c1) 18%, transparent); }
.u-npage .u-nsearch input { flex: 1; min-width: 0; height: 44px; padding: 0 16px; border: 0; border-radius: 0; box-shadow: none; background: transparent; font: inherit; font-size: 14.5px; color: var(--u-ink); outline: none; }
.u-npage .u-nsearch button { flex: none; width: 50px; height: 44px; padding: 0; border: 0; border-radius: 0; background: var(--u-c1); color: var(--u-on1); font-size: 15px; cursor: pointer; transition: filter 0.2s; }
.u-npage .u-nsearch button:hover { filter: brightness(1.12); }

@media (min-width: 520px) { .u-npage .u-ngrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1360px) { .u-npage .u-ngrid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; } }
@media (prefers-reduced-motion: reduce) { .u-npage .u-ncard, .u-npage .u-pager__a, .u-npage .u-nsearch { transition: none; } .u-npage .u-ncard:hover { translate: none; } }

/* ---- แก้ sidebar หมวดข่าวซ้อน/ล้น + รายชื่อหมวดเมื่อไม่ระบุ id ---- */
.u-npage .u-side.u-nside { background: none; padding: 0; border-radius: 0; min-width: 0; width: 100%; max-height: calc(100vh - 140px); overflow-y: auto; overscroll-behavior: contain; }
.u-npage .u-nside__block { min-width: 0; box-sizing: border-box; }
.u-npage .u-nside .u-side__link span { min-width: 0; overflow-wrap: anywhere; }
@media (max-width: 1099px) { .u-npage .u-side.u-nside { position: static; max-height: none; overflow: visible; } }

.u-npage .u-ncats { display: grid; gap: 12px; grid-template-columns: minmax(0, 1fr); }
.u-npage .u-ncat { display: flex; align-items: center; gap: 14px; min-height: 64px; padding: 12px 18px; background: #fff; border: 1px solid var(--u-line); border-radius: 18px; color: var(--u-ink) !important; text-decoration: none !important; transition: box-shadow 0.25s, translate 0.25s, border-color 0.25s; }
.u-npage .u-ncat:hover { box-shadow: var(--u-shadow-2); translate: 0 -2px; border-color: var(--u-c1); }
.u-npage .u-ncat__icon { flex: none; width: 40px; height: 40px; display: grid; place-content: center; border-radius: 12px; background: var(--u-tint); color: var(--u-c1); font-size: 17px; }
.u-npage .u-ncat__name { flex: 1; min-width: 0; font-size: 15.5px; font-weight: 500; line-height: 1.45; overflow-wrap: anywhere; }
.u-npage .u-ncat__cnt { flex: none; min-width: 28px; padding: 0 10px; border-radius: 999px; background: var(--u-tint); color: var(--u-c1); font-size: 13px; text-align: center; line-height: 26px; }
.u-npage .u-ncat__go { flex: none; color: var(--u-c1); font-size: 18px; }
@media (min-width: 560px) { .u-npage .u-ncats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (prefers-reduced-motion: reduce) { .u-npage .u-ncat { transition: none; } .u-npage .u-ncat:hover { translate: none; } }

/* ==========================================================================
   Header สองชั้น (เดสก์ท็อป ≥1100px): ชื่อหน่วยงานแถวบน / เมนูหลักแถวล่าง
   แก้ปัญหาชื่อหน่วยงานสั้น-ยาวบีบเมนู (หรือเมนูบีบชื่อ) — เพิ่มท้ายไฟล์เพื่อทับกฎเดิม
   ถ้าจะย้อนกลับ: ลบบล็อกนี้ทั้งบล็อก
   ========================================================================== */

/* ตัดคำเฉพาะเมื่อจำเป็น (anywhere ทำให้ชื่อหดเหลือตัวอักษรเดียวใน flex) */
.u-brand__name { overflow-wrap: break-word; }

@media (min-width: 1100px) {
  .u-header__inner { flex-wrap: wrap; gap: 0 40px; min-height: 0; }

  /* แถวบน: โลโก้ + ชื่อ ใช้ความกว้างเต็ม */
  .u-brand { flex: 1 1 100%; padding-block: 14px 10px; }
  .u-brand__name { font-size: clamp(20px, 1.1vw + 8px, 24px); }

  /* แถวล่าง: เมนูหลักเต็มความกว้าง ถ้าล้นให้ขึ้นบรรทัดใหม่แทนการล้นจอ */
  .u-nav { flex: 1 1 100%; margin-inline-start: 0; border-top: 1px solid var(--u-line); }
  .u-nav__list { flex-wrap: wrap; }
  .u-nav__link { min-height: 48px; }

  /* header สูงขึ้น: ลดความสูงสูงสุดของ mega menu ให้พอดีจอ */
  .u-mega__box { max-height: calc(100vh - 250px); }
}

/* (ปิดไว้ — ยังไม่ได้ตัดสินใจ) ย่อแถวชื่อเมื่อ header ติดขอบบนตอนเลื่อนลง
   หมายเหตุ: จะเกิดการกระโดดของเนื้อหาประมาณ 40px ตอนเริ่มติดขอบ
@container u-hdr scroll-state(stuck: top) {
  @media (min-width: 1100px) {
    .u-brand { padding-block: 6px 4px; }
    .u-brand__logo { height: 40px; }
    .u-brand__sub { display: none; }
  }
}
*/