/* ============================================================
   DBF UP — news-detail.css : สไตล์เฉพาะหน้าอ่านข่าว
   ------------------------------------------------------------
   ไฟล์นี้โหลด "ต่อจาก" assets/css/pages/gallery-news.css
   ซึ่งเป็นโครงร่วมของเว็บ (header · เมนู · footer · dark mode ·
   ตัวแปรสี · .wrap · .bg-aurora · .pv) — จึงไม่ต้องเขียนซ้ำที่นี่
   ใช้ภาษาการออกแบบเดียวกับหน้าคลังภาพข่าว : มุมผสมเหลี่ยม-มน
   ============================================================ */
:root {
  --art-fs: 16px;
  /* ความกว้างหน้าใช้ค่าเดียวกับหน้าคลังภาพข่าว (--page-w:1400px จาก gallery-news.css)
     จึงไม่กำหนดทับที่นี่ — ทั้งเว็บกว้างเท่ากันหมด */
  --side-w: 300px;
  /* แถบข้าง */
  --gap-col: 32px;
  --rad-a: 28px 6px 28px 6px;
  --rad-b: 6px 28px 6px 28px;
  --shadow-s: 0 14px 34px -24px rgba(15, 45, 28, .30);
  --shadow-m: 0 26px 60px -34px rgba(15, 45, 28, .40);
  --shadow-l: 0 40px 90px -46px rgba(15, 45, 28, .50);
}

[hidden] {
  display: none !important
}

/* ============================================================
   แถบความคืบหน้าการอ่าน
   ============================================================ */
.read-progress {
  position: fixed;
  top: 0;
  left: 0;
  height: 3px;
  width: 0;
  z-index: 95;
  background: linear-gradient(90deg, #9C3FCC, #45BF90, #2AD87F);
  box-shadow: 0 0 12px rgba(42, 216, 127, .55);
  transition: width .1s linear;
}

/* ============================================================
   HERO
   ============================================================ */
.nd-hero {
  position: relative;
  padding: 130px 0 34px;
  overflow: hidden
}

.nd-hero .wrap {
  position: relative;
  z-index: 1
}

.nd-cat {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 12px;
  letter-spacing: .02em;
  padding: 9px 17px;
  border-radius: 100px 4px 100px 4px;
  margin-bottom: 18px;
  background: linear-gradient(135deg, rgba(156, 63, 204, .12), rgba(42, 216, 127, .12));
  border: 1px solid rgba(20, 168, 98, .28);
  color: var(--green-deep);
  transition: .35s var(--ease);
}

.nd-cat:hover {
  transform: translateY(-2px);
  border-color: var(--green);
  box-shadow: 0 12px 26px -14px rgba(20, 168, 98, .6)
}

.nd-cat i {
  font-size: 11px
}

html[data-theme="dark"] .nd-cat {
  color: var(--green-leaf);
  border-color: rgba(98, 229, 161, .28)
}

.nd-title {
  font-weight: 400;
  font-size: clamp(25px, 3.3vw, 42px);
  line-height: 1.32;
  letter-spacing: -.01em;
  max-width: 960px;
  margin-bottom: 20px;
  color: var(--ink);
}

.nd-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 24px;
  font-size: 13px;
  color: rgba(11, 20, 14, .55)
}

.nd-meta span {
  display: inline-flex;
  align-items: center;
  gap: 8px
}

.nd-meta i {
  font-size: 12.5px;
  color: var(--green-deep)
}

html[data-theme="dark"] .nd-meta {
  color: rgba(237, 242, 238, .55)
}

html[data-theme="dark"] .nd-meta i {
  color: var(--green-leaf)
}

/* ============================================================
   แถบเครื่องมือลอย
   ============================================================ */
.nd-actionbar {
  position: sticky;
  top: 0;
  z-index: 60;
  padding: 11px 0;
  margin-bottom: 6px;
  background: rgba(250, 253, 249, .74);
  backdrop-filter: blur(18px) saturate(1.5);
  -webkit-backdrop-filter: blur(18px) saturate(1.5);
  border-bottom: 1px solid transparent;
  transition: .4s var(--ease);
}

.nd-actionbar.stuck {
  border-bottom-color: var(--line);
  box-shadow: 0 12px 30px -22px rgba(15, 45, 28, .5)
}

html[data-theme="dark"] .nd-actionbar {
  background: rgba(11, 15, 20, .76)
}

.nd-actionbar-in {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap
}

.nd-tools-left,
.nd-tools-right {
  display: flex;
  align-items: center;
  gap: 9px;
  flex-wrap: wrap
}

.nd-tool {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  padding: 10px 16px;
  border-radius: 100px 4px 100px 4px;
  background: rgba(255, 255, 255, .75);
  border: 1px solid var(--line);
  color: rgba(11, 20, 14, .72);
  transition: .3s var(--ease);
}

.nd-tool i {
  font-size: 12px;
  color: var(--green-deep)
}

.nd-tool:hover {
  border-color: var(--green);
  color: var(--green-deep);
  transform: translateY(-2px)
}

.nd-tool.active {
  background: linear-gradient(135deg, var(--violet), var(--green));
  color: #fff;
  border-color: transparent
}

.nd-tool.active i {
  color: #fff
}

html[data-theme="dark"] .nd-tool {
  background: rgba(255, 255, 255, .06);
  border-color: rgba(163, 79, 214, .22);
  color: rgba(237, 242, 238, .75)
}

html[data-theme="dark"] .nd-tool i {
  color: var(--green-leaf)
}

.nd-font {
  display: flex;
  gap: 3px;
  padding: 4px;
  border-radius: 100px 4px 100px 4px;
  background: rgba(255, 255, 255, .75);
  border: 1px solid var(--line)
}

.ndf-btn {
  min-width: 38px;
  height: 32px;
  padding: 0 10px;
  border-radius: 100px;
  font-size: 13px;
  color: rgba(11, 20, 14, .65);
  transition: .3s var(--ease);
}

.ndf-btn:hover {
  background: rgba(20, 168, 98, .12);
  color: var(--green-deep)
}

html[data-theme="dark"] .nd-font {
  background: rgba(255, 255, 255, .06);
  border-color: rgba(163, 79, 214, .22)
}

html[data-theme="dark"] .ndf-btn {
  color: rgba(237, 242, 238, .65)
}

@media (max-width:640px) {
  .nd-tool span {
    display: none
  }

  .nd-tool {
    padding: 11px 14px
  }

  .nd-tool i {
    font-size: 14px
  }
}

/* ============================================================
   โครงหน้า
   ============================================================ */
.page-body {
  padding: 26px 0 100px
}

.nd-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--side-w);
  gap: var(--gap-col);
  align-items: start
}

.nd-article {
  min-width: 0
}

/* ---------- หน้าปก ---------- */
.nd-cover {
  position: relative;
  border-radius: 26px 6px 26px 6px;
  overflow: hidden;
  margin-bottom: 12px;
  aspect-ratio: 1200 / 628;
  background: linear-gradient(135deg, #E8EFE9, #DDE8E0);
  border: 1px solid var(--line);
  box-shadow: 0 26px 60px -30px rgba(15, 45, 28, .42);
}

.nd-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block
}

.nd-cover-ph {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: 48px;
  color: rgba(20, 168, 98, .25)
}

.nd-cover.no-img .nd-cover-ph {
  display: grid !important
}

html[data-theme="dark"] .nd-cover {
  background: linear-gradient(135deg, #141c24, #10161c)
}

.nd-zoom {
  position: absolute;
  bottom: 14px;
  right: 14px;
  z-index: 2;
  width: 44px;
  height: 44px;
  border-radius: 13px 4px 13px 4px;
  display: grid;
  place-items: center;
  background: rgba(9, 13, 17, .55);
  color: #fff;
  font-size: 15px;
  backdrop-filter: blur(8px);
  transition: .3s var(--ease);
  opacity: 0;
}

.nd-cover:hover .nd-zoom {
  opacity: 1
}

.nd-zoom:hover {
  background: linear-gradient(135deg, var(--violet), var(--green));
  transform: scale(1.08)
}

@media (hover:none) {
  .nd-zoom {
    opacity: 1
  }
}

.nd-cover-cap {
  display: block;
  font-size: 12.5px;
  line-height: 1.75;
  color: rgba(11, 20, 14, .5);
  padding: 0 4px 0 14px;
  margin-bottom: 26px;
  border-left: 3px solid rgba(20, 168, 98, .35);
}

.nd-cover-cap em {
  font-style: normal;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-left: 8px;
  color: var(--green-deep)
}

.nd-cover-cap i {
  font-size: 11px
}

html[data-theme="dark"] .nd-cover-cap {
  color: rgba(237, 242, 238, .5)
}

html[data-theme="dark"] .nd-cover-cap em {
  color: var(--green-leaf)
}

/* ---------- SDGs ---------- */
.nd-sdgs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-bottom: 28px
}

.nd-sdg-lead {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 12px;
  color: rgba(11, 20, 14, .5);
  padding-right: 6px;
}

.nd-sdg-lead i {
  color: var(--violet)
}

html[data-theme="dark"] .nd-sdg-lead {
  color: rgba(237, 242, 238, .5)
}

.nd-sdg {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 6px 15px 6px 6px;
  border-radius: 14px 4px 14px 4px;
  background: rgba(255, 255, 255, .8);
  border: 1px solid var(--line);
  font-size: 12px;
  color: rgba(11, 20, 14, .75);
  transition: .3s var(--ease);
}

.nd-sdg img {
  width: 34px;
  height: 34px;
  border-radius: 9px 3px 9px 3px;
  object-fit: cover;
  flex: none
}

.nd-sdg .sd-num {
  width: 34px;
  height: 34px;
  border-radius: 9px 3px 9px 3px;
  flex: none;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, var(--violet), var(--green));
  color: #fff;
  font-size: 13px;
}

.nd-sdg .sd-name {
  max-width: 230px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap
}

.nd-sdg:hover {
  transform: translateY(-3px);
  border-color: var(--green);
  box-shadow: 0 14px 28px -14px rgba(20, 168, 98, .5)
}

html[data-theme="dark"] .nd-sdg {
  background: rgba(255, 255, 255, .05);
  border-color: rgba(163, 79, 214, .22);
  color: rgba(237, 242, 238, .75)
}

/* ---------- เนื้อข่าว ---------- */
.nd-content {
  font-size: var(--art-fs);
  line-height: 2.05;
  color: rgba(11, 20, 14, .84);
  transition: font-size .3s var(--ease);
}

.nd-content p {
  margin-bottom: 20px
}

.nd-content h2,
.nd-content h3 {
  font-weight: 400;
  margin: 34px 0 14px;
  line-height: 1.45
}

.nd-content h2 {
  font-size: 1.38em
}

.nd-content h3 {
  font-size: 1.18em
}

.nd-content ul,
.nd-content ol {
  margin: 0 0 20px 26px
}

.nd-content li {
  margin-bottom: 9px
}

.nd-content a {
  color: var(--green-deep);
  text-decoration: underline;
  text-underline-offset: 3px
}

.nd-content strong,
.nd-content b {
  font-weight: 500
}

.nd-content img,
.nd-content .nd-inline-img {
  border-radius: 18px 4px 18px 4px;
  margin: 26px auto;
  border: 1px solid var(--line);
  box-shadow: 0 18px 44px -26px rgba(15, 45, 28, .4);
  max-width: 100%;
  height: auto;
}

.nd-content table {
  width: 100%;
  border-collapse: collapse;
  margin: 24px 0;
  font-size: .92em
}

.nd-content th,
.nd-content td {
  border: 1px solid var(--line);
  padding: 10px 14px;
  text-align: left
}

.nd-content th {
  background: rgba(20, 168, 98, .07);
  font-weight: 400;
  color: var(--green-deep)
}

.nd-content blockquote {
  border-left: 3px solid var(--green);
  padding: 12px 22px;
  margin: 24px 0;
  background: rgba(20, 168, 98, .05);
  border-radius: 0 16px 16px 0;
  color: rgba(11, 20, 14, .72);
}

html[data-theme="dark"] .nd-content {
  color: rgba(237, 242, 238, .82)
}

html[data-theme="dark"] .nd-content a {
  color: var(--green-leaf)
}

html[data-theme="dark"] .nd-content blockquote {
  background: rgba(98, 229, 161, .06);
  color: rgba(237, 242, 238, .72)
}

/* หัวข้อรองในบทความ */
.nd-h2 {
  display: flex;
  align-items: center;
  gap: 12px;
  font-weight: 400;
  font-size: 19px;
  margin: 44px 0 18px;
}

.nd-h2 i {
  width: 38px;
  height: 38px;
  border-radius: 12px 4px 12px 4px;
  flex: none;
  display: grid;
  place-items: center;
  font-size: 14px;
  color: #fff;
  background: linear-gradient(135deg, var(--violet), var(--green));
}

.nd-h2 em {
  font-style: normal;
  font-size: 11.5px;
  padding: 5px 13px;
  border-radius: 100px 4px 100px 4px;
  background: rgba(20, 168, 98, .1);
  color: var(--green-deep);
  margin-left: auto;
}

html[data-theme="dark"] .nd-h2 em {
  background: rgba(98, 229, 161, .12);
  color: var(--green-leaf)
}

/* ---------- อัลบั้มรูป ---------- */
.nd-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  grid-auto-rows: 1fr;
  grid-auto-flow: dense;
  gap: 12px
}

.nd-gthumb {
  position: relative;
  aspect-ratio: 1;
  border-radius: 14px 4px 14px 4px;
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--mist);
  cursor: zoom-in;
  padding: 0;
  transition: .35s var(--ease);
}

.nd-gthumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .55s var(--ease)
}

.nd-gthumb:hover {
  transform: translateY(-4px);
  border-color: var(--green);
  box-shadow: 0 16px 32px -16px rgba(15, 45, 28, .45);
  z-index: 2
}

.nd-gthumb:hover img {
  transform: scale(1.09)
}

.nd-gthumb .gt-zoom {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: #fff;
  font-size: 18px;
  background: rgba(9, 13, 17, .42);
  opacity: 0;
  transition: .3s var(--ease);
}

.nd-gthumb:hover .gt-zoom {
  opacity: 1
}

.nd-gthumb.no-img {
  display: none
}

.nd-album-more {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  margin-top: 14px;
  padding: 13px;
  border-radius: 100px 100px 100px 6px;
  font-size: 13px;
  background: rgba(255, 255, 255, .7);
  border: 1px solid var(--line);
  color: var(--green-deep);
  transition: .35s var(--ease);
}

.nd-album-more:hover {
  background: linear-gradient(135deg, var(--violet), var(--green));
  color: #fff;
  border-color: transparent
}

html[data-theme="dark"] .nd-album-more {
  background: rgba(255, 255, 255, .05);
  color: var(--green-leaf)
}

/* ============================================================
   กล่องแชร์ + พรีวิวหน้าปก
   ============================================================ */
.nd-share {
  margin-top: 40px;
  padding: 26px;
  border-radius: 24px 6px 24px 6px;
  background: rgba(255, 255, 255, .72);
  border: 1px solid var(--line);
  backdrop-filter: blur(12px);
}

html[data-theme="dark"] .nd-share {
  background: rgba(19, 26, 33, .66);
  border-color: rgba(163, 79, 214, .2)
}

.nd-share-t {
  font-size: 14px;
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  gap: 11px
}

.nd-share-t i {
  width: 34px;
  height: 34px;
  border-radius: 11px 3px 11px 3px;
  display: grid;
  place-items: center;
  flex: none;
  font-size: 13px;
  color: #fff;
  background: linear-gradient(135deg, var(--violet), var(--green));
}

/* พรีวิว = หน้าตาตอนแชร์ไป Facebook/LINE */
.nd-share-preview {
  display: flex;
  gap: 0;
  margin-bottom: 18px;
  overflow: hidden;
  border-radius: 14px 4px 14px 4px;
  border: 1px solid var(--line);
  background: #fff;
}

.nsp-img {
  position: relative;
  width: 200px;
  flex: none;
  aspect-ratio: 1200/628;
  background: var(--mist);
  display: grid;
  place-items: center;
  color: rgba(20, 168, 98, .3);
  font-size: 26px;
}

.nsp-img img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover
}

.nsp-body {
  padding: 14px 18px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px
}

.nsp-body b {
  font-weight: 400;
  font-size: 13.5px;
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.nsp-body span {
  font-size: 11.5px;
  line-height: 1.65;
  color: rgba(11, 20, 14, .5);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.nsp-body em {
  font-style: normal;
  font-size: 10.5px;
  color: rgba(11, 20, 14, .38);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

html[data-theme="dark"] .nd-share-preview {
  background: rgba(255, 255, 255, .04);
  border-color: rgba(163, 79, 214, .2)
}

html[data-theme="dark"] .nsp-body span {
  color: rgba(237, 242, 238, .5)
}

html[data-theme="dark"] .nsp-body em {
  color: rgba(237, 242, 238, .35)
}

@media (max-width:560px) {
  .nd-share-preview {
    flex-direction: column
  }

  .nsp-img {
    width: 100%
  }
}

.nd-share-btns {
  display: flex;
  flex-wrap: wrap;
  gap: 10px
}

.nds-btn {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 13px;
  padding: 12px 20px;
  border-radius: 100px 4px 100px 4px;
  color: #fff;
  transition: .35s var(--ease);
}

.nds-btn:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 30px -14px rgba(0, 0, 0, .45)
}

.nds-btn.fb {
  background: #1877F2
}

.nds-btn.line {
  background: #06C755
}

.nds-btn.tw {
  background: #111
}

.nds-btn.cp,
.nds-btn.native {
  background: linear-gradient(135deg, var(--violet), var(--green))
}

/* ============================================================
   ข่าวก่อนหน้า / ถัดไป
   ============================================================ */
.nd-pager {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-top: 34px
}

.ndp {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px;
  border-radius: 20px 5px 20px 5px;
  background: rgba(255, 255, 255, .72);
  border: 1px solid var(--line);
  transition: .35s var(--ease);
  min-width: 0;
}

.ndp:hover {
  transform: translateY(-4px);
  border-color: var(--green);
  box-shadow: 0 18px 38px -20px rgba(20, 168, 98, .5)
}

.ndp.next {
  flex-direction: row-reverse;
  text-align: right
}

.ndp-img {
  position: relative;
  width: 96px;
  flex: none;
  aspect-ratio: 1200/628;
  overflow: hidden;
  border-radius: 12px 4px 12px 4px;
  background: var(--mist);
  display: grid;
  place-items: center;
  color: rgba(20, 168, 98, .3);
}

.ndp-img img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover
}

.ndp-body {
  min-width: 0
}

.ndp-body em {
  font-style: normal;
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 11px;
  color: var(--green-deep);
  margin-bottom: 5px;
}

.ndp.next .ndp-body em {
  justify-content: flex-end;
  flex-direction: row-reverse
}

.ndp-body b {
  font-weight: 400;
  font-size: 13px;
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.ndp-empty {
  display: block
}

html[data-theme="dark"] .ndp {
  background: rgba(19, 26, 33, .66);
  border-color: rgba(163, 79, 214, .2)
}

html[data-theme="dark"] .ndp-body em {
  color: var(--green-leaf)
}

@media (max-width:640px) {
  .nd-pager {
    grid-template-columns: 1fr
  }

  .ndp.next {
    flex-direction: row;
    text-align: left
  }

  .ndp.next .ndp-body em {
    justify-content: flex-start;
    flex-direction: row
  }
}

/* ============================================================
   ข่าวที่เกี่ยวข้อง
   ============================================================ */
.nd-rel-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px
}

.ndr {
  display: flex;
  flex-direction: column;
  border-radius: 20px 20px 20px 5px;
  overflow: hidden;
  background: rgba(255, 255, 255, .85);
  border: 1px solid var(--line);
  transition: .4s var(--ease);
}

.ndr:hover {
  transform: translateY(-6px);
  border-color: rgba(156, 63, 204, .32);
  box-shadow: 0 26px 52px -26px rgba(140, 80, 200, .45)
}

.ndr-img {
  position: relative;
  aspect-ratio: 1200/628;
  background: var(--mist);
  overflow: hidden;
  display: grid;
  place-items: center;
  color: rgba(20, 168, 98, .3);
}

.ndr-img img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .6s var(--ease)
}

.ndr:hover .ndr-img img {
  transform: scale(1.06)
}

.ndr b {
  font-weight: 400;
  font-size: 14px;
  line-height: 1.55;
  padding: 15px 16px 8px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.ndr-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  font-size: 11px;
  color: rgba(11, 20, 14, .48);
  padding: 0 16px 16px;
  margin-top: auto;
}

.ndr-meta i {
  color: var(--green-deep);
  margin-right: 2px
}

html[data-theme="dark"] .ndr {
  background: rgba(19, 26, 33, .85);
  border-color: rgba(163, 79, 214, .2)
}

html[data-theme="dark"] .ndr-meta {
  color: rgba(237, 242, 238, .5)
}

html[data-theme="dark"] .ndr-meta i {
  color: var(--green-leaf)
}

@media (max-width:820px) {
  .nd-rel-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr))
  }
}

@media (max-width:520px) {
  .nd-rel-grid {
    grid-template-columns: 1fr
  }
}

/* ============================================================
   แถบข้าง
   ============================================================ */
.nd-side {
  display: flex;
  flex-direction: column;
  gap: 16px;
  position: sticky;
  top: 88px
}

.nd-side-card {
  background: rgba(255, 255, 255, .78);
  border: 1px solid var(--line);
  border-radius: 24px 6px 24px 6px;
  padding: 22px 20px;
  backdrop-filter: blur(14px);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .7) inset, 0 16px 40px -26px rgba(15, 45, 28, .24);
}

.nd-side-card h3 {
  font-weight: 400;
  font-size: 14px;
  display: flex;
  align-items: center;
  gap: 11px;
  margin-bottom: 16px
}

.nd-side-card h3 i {
  width: 36px;
  height: 36px;
  border-radius: 11px 3px 11px 3px;
  display: grid;
  place-items: center;
  flex: none;
  color: #fff;
  font-size: 13px;
  background: linear-gradient(135deg, var(--violet), var(--green));
}

html[data-theme="dark"] .nd-side-card {
  background: rgba(19, 26, 33, .66);
  border-color: rgba(163, 79, 214, .2)
}

/* ข้อมูลข่าว */
.nd-facts li {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 9px 4px;
  font-size: 12.5px;
  border-bottom: 1px dashed var(--line);
}

.nd-facts li:last-child {
  border-bottom: 0
}

.nd-facts i {
  width: 15px;
  text-align: center;
  font-size: 11.5px;
  color: var(--green-deep);
  flex: none
}

.nd-facts span {
  color: rgba(11, 20, 14, .5);
  flex: none
}

.nd-facts b {
  font-weight: 400;
  margin-left: auto;
  text-align: right;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 150px;
}

html[data-theme="dark"] .nd-facts i {
  color: var(--green-leaf)
}

html[data-theme="dark"] .nd-facts span {
  color: rgba(237, 242, 238, .5)
}

/* ข่าวยอดนิยม */
.nd-pop li {
  margin-bottom: 5px
}

.nd-pop a {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 8px;
  border-radius: 4px 14px 14px 4px;
  transition: .3s var(--ease)
}

.nd-pop a:hover {
  background: rgba(20, 168, 98, .07)
}

.np-rank {
  width: 22px;
  flex: none;
  text-align: center;
  font-size: 15px;
  font-weight: 400;
  color: rgba(11, 20, 14, .22);
  font-variant-numeric: tabular-nums;
}

.nd-pop li:nth-child(1) .np-rank {
  color: var(--violet)
}

.nd-pop li:nth-child(2) .np-rank {
  color: var(--green)
}

.np-ph {
  position: relative;
  width: 62px;
  flex: none;
  aspect-ratio: 1200/628;
  overflow: hidden;
  border-radius: 9px 3px 9px 3px;
  background: var(--mist);
  display: grid;
  place-items: center;
  color: rgba(20, 168, 98, .3);
  font-size: 13px;
}

.np-ph img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover
}

.np-body {
  min-width: 0
}

.np-body h4 {
  font-weight: 400;
  font-size: 12.5px;
  line-height: 1.5;
  margin-bottom: 4px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.np-v {
  font-size: 10.5px;
  color: rgba(11, 20, 14, .45);
  display: flex;
  align-items: center;
  gap: 5px
}

.np-v i {
  color: var(--green-deep)
}

html[data-theme="dark"] .np-v {
  color: rgba(237, 242, 238, .45)
}

html[data-theme="dark"] .np-v i {
  color: var(--green-leaf)
}

/* หมวดหมู่ */
.nd-cats li {
  margin-bottom: 3px
}

.nd-cat-link {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 11px 13px;
  border-radius: 4px 14px 14px 4px;
  font-size: 13px;
  color: rgba(11, 20, 14, .72);
  transition: .3s var(--ease);
  overflow: hidden;
}

.nd-cat-link::before {
  content: "";
  position: absolute;
  left: 0;
  top: 8px;
  bottom: 8px;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: linear-gradient(180deg, var(--violet), var(--green));
  transform: scaleY(0);
  transition: .35s var(--ease);
}

.nd-cat-link:hover::before,
.nd-cat-link.on::before {
  transform: scaleY(1)
}

.nd-cat-link:hover {
  background: rgba(20, 168, 98, .07);
  color: var(--green-deep)
}

.nd-cat-link.on {
  background: linear-gradient(115deg, rgba(156, 63, 204, .1), rgba(42, 216, 127, .1));
  color: var(--green-deep)
}

.nd-cat-link .c-n {
  font-size: 11px;
  padding: 4px 11px;
  border-radius: 100px;
  background: rgba(11, 20, 14, .06);
  color: rgba(11, 20, 14, .5)
}

.nd-cat-link.on .c-n {
  background: var(--green);
  color: #fff
}

html[data-theme="dark"] .nd-cat-link {
  color: rgba(237, 242, 238, .72)
}

html[data-theme="dark"] .nd-cat-link .c-n {
  background: rgba(255, 255, 255, .08);
  color: rgba(237, 242, 238, .5)
}

/* ติดตามเรา */
.nd-fb-link {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 14px 16px;
  border-radius: 16px 4px 16px 4px;
  background: linear-gradient(135deg, rgba(24, 119, 242, .1), rgba(42, 216, 127, .06));
  border: 1px solid rgba(24, 119, 242, .22);
  transition: .35s var(--ease);
}

.nd-fb-link:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 30px -16px rgba(24, 119, 242, .5)
}

.nd-fb-link>i:first-child {
  width: 40px;
  height: 40px;
  border-radius: 12px 3px 12px 3px;
  background: #1877F2;
  color: #fff;
  display: grid;
  place-items: center;
  font-size: 16px;
  flex: none;
}

.nd-fb-link div {
  flex: 1;
  min-width: 0
}

.nd-fb-link b {
  font-weight: 400;
  font-size: 13px;
  display: block
}

.nd-fb-link span {
  font-size: 11px;
  color: rgba(11, 20, 14, .5)
}

.nd-fb-go {
  font-size: 12px;
  color: rgba(11, 20, 14, .32)
}

html[data-theme="dark"] .nd-fb-link span {
  color: rgba(237, 242, 238, .5)
}

/* ============================================================
   ปุ่มขึ้นบน · ไลต์บ็อกซ์ · แจ้งเตือน · ข้อผิดพลาด
   ============================================================ */
.nd-totop {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 70;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, var(--violet), var(--green));
  color: #fff;
  font-size: 16px;
  box-shadow: 0 18px 36px -14px rgba(80, 120, 160, .7);
  opacity: 0;
  visibility: hidden;
  transform: translateY(16px);
  transition: .4s var(--ease);
}

.nd-totop.show {
  opacity: 1;
  visibility: visible;
  transform: none
}

@media (max-width:720px) {
  .nd-totop {
    right: 14px;
    bottom: 80px;
    width: 44px;
    height: 44px
  }
}

/* ============================================================
   ★ ไลต์บ็อกซ์ดูรูป — รูปหน้าปก + รูปเพิ่มเติมทุกใบ
   จอเต็ม · แถบรูปย่อเลือกได้ · ซูม · บันทึกรูป · ปัดนิ้ว
   ============================================================ */
.ndlb {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  grid-template-rows: auto 1fr auto auto;
  animation: ndlbIn .28s var(--ease) both;
}

@keyframes ndlbIn {
  from {
    opacity: 0
  }

  to {
    opacity: 1
  }
}

/* พื้นหลังทึบสนิท — ไม่ให้เนื้อหาข้างหลังทะลุขึ้นมากวนสายตา */
.ndlb-scrim {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: #06090C
}

.ndlb-scrim::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(120% 90% at 50% 0%, rgba(58, 28, 92, .55), transparent 68%);
}

body.nd-lb-open {
  overflow: hidden
}

/* --- แถบบน --- */
.ndlb-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px clamp(14px, 2.4vw, 30px);
}

.ndlb-where {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0
}

.ndlb-kind {
  font-size: 11.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  padding: 7px 15px;
  border-radius: 100px 3px 100px 3px;
  background: linear-gradient(135deg, rgba(156, 63, 204, .42), rgba(20, 168, 98, .42));
  border: 1px solid rgba(255, 255, 255, .17);
  color: #fff;
  white-space: nowrap;
}

.ndlb-count {
  font-size: 13px;
  color: rgba(255, 255, 255, .62);
  font-variant-numeric: tabular-nums
}

.ndlb-count b {
  font-weight: 400;
  font-size: 17px;
  color: #fff
}

.ndlb-count i {
  font-style: normal;
  margin: 0 5px;
  opacity: .4
}

.ndlb-acts {
  display: flex;
  gap: 8px
}

.ndlb-a {
  width: 44px;
  height: 44px;
  flex: none;
  border-radius: 13px 4px 13px 4px;
  display: grid;
  place-items: center;
  font-size: 15px;
  color: rgba(255, 255, 255, .85);
  background: rgba(255, 255, 255, .09);
  border: 1px solid rgba(255, 255, 255, .12);
  transition: .28s var(--ease);
}

.ndlb-a:hover {
  background: rgba(255, 255, 255, .2);
  color: #fff;
  transform: translateY(-2px)
}

.ndlb-a.close:hover {
  background: #E0517A;
  border-color: transparent;
  transform: rotate(90deg)
}

/* --- เวที ---
   ⚠️⚠️ ห้ามเปลี่ยน display:flex บรรทัดล่างกลับไปเป็น grid เด็ดขาด ⚠️⚠️

   เดิมตรงนี้เป็น  display:grid;place-items:center
   แล้วเกิดอาการ "รูปโดนตัด เห็นแต่ตรงกลาง" บนจอคอมพิวเตอร์

   สาเหตุ
     บรรทัด max-height:100% ของรูป ต้องเทียบกับ "ความสูงของช่องที่รูปอยู่"
     พอเวทีเป็น grid รูปจะไปอยู่ในแถวแบบ auto ซึ่งความสูงขึ้นกับตัวรูปเอง
     กลายเป็นวงกลม รูปถามช่อง ช่องถามรูป เบราว์เซอร์เลยตอบว่า "ไม่รู้"
     แล้วทิ้ง max-height:100% ไปเฉย ๆ
     เหลือแต่ max-width:100% รูปจึงสูงเกินเวที แล้วถูก overflow:hidden เฉือนหัวท้ายทิ้ง

     ยิ่งจอเตี้ย (โน้ตบุ๊ก 1366x768) ยิ่งโดนตัดเยอะ
     ส่วนมือถือไม่เคยเป็น เพราะจอสูงกว่ากว้าง รูปจึงเตี้ยกว่าเวทีอยู่แล้ว

   วิธีแก้
     เปลี่ยนเวทีเป็น flex ในโหมดนี้ รูปเทียบความสูงกับกล่องเวทีโดยตรง
     ซึ่งมีความสูงชัดเจนอยู่แล้ว (มาจากแถว 1fr ของ .ndlb ที่ยึดเต็มจอ)
     max-height:100% จึงทำงาน รูปย่อลงพอดีเวที เห็นครบทั้งใบ

   ⚠️ min-height:0 ต้องอยู่ ห้ามลบ
      ไม่งั้นช่องของเวทีจะยืดตามรูปแทนที่จะบีบรูป อาการเดิมจะกลับมาทันที
   --------------------------------------------------------- */
.ndlb-stage {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  /* เว้นขอบบนล่างเล็กน้อย ไม่ให้รูปชนขอบพอดีเป๊ะจนดูอึดอัด
     และเผื่อที่ให้เงาใต้รูปด้วย ไม่งั้นเงาจะถูก overflow:hidden ตัดหาย */
  padding: 12px clamp(10px, 5vw, 86px);
  min-height: 0;
  height: 100%;
  overflow: hidden;
}

.ndlb-stage img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: 14px 4px 14px 4px;
  box-shadow: 0 50px 120px -40px rgba(0, 0, 0, .9);
  opacity: 0;
  transform: scale(.985);
  transition: opacity .35s var(--ease), transform .35s var(--ease);
  cursor: zoom-in;
}

.ndlb-stage img.ready {
  opacity: 1;
  transform: none
}

.ndlb-stage img.zoom {
  cursor: zoom-out;
  transform: scale(2.1);
  max-width: none;
  max-height: none;
  transition: transform .4s var(--ease);
}

/* กำลังโหลด */
.ndlb-load {
  position: absolute;
  display: flex;
  gap: 7px
}

.ndlb-load span {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .75);
  animation: ndlbDot 1.05s ease-in-out infinite;
}

.ndlb-load span:nth-child(2) {
  animation-delay: .14s
}

.ndlb-load span:nth-child(3) {
  animation-delay: .28s
}

@keyframes ndlbDot {

  0%,
  80%,
  100% {
    transform: scale(.55);
    opacity: .35
  }

  40% {
    transform: scale(1);
    opacity: 1
  }
}

/* เปิดไม่ได้ */
.ndlb-err {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 34px 40px;
  border-radius: 22px 6px 22px 6px;
  text-align: center;
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .14);
  color: #fff;
}

.ndlb-err i {
  font-size: 30px;
  color: #F0B849
}

.ndlb-err b {
  font-weight: 400;
  font-size: 16px
}

.ndlb-err span {
  font-size: 11.5px;
  color: rgba(255, 255, 255, .5);
  word-break: break-all;
  max-width: min(560px, 80vw)
}

/* --- ปุ่มเลื่อน --- */
.ndlb-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: rgba(255, 255, 255, .1);
  border: 1px solid rgba(255, 255, 255, .14);
  color: #fff;
  font-size: 17px;
  backdrop-filter: blur(6px);
  transition: .3s var(--ease);
}

.ndlb-nav:hover {
  background: linear-gradient(135deg, var(--violet), var(--green));
  border-color: transparent;
  transform: translateY(-50%) scale(1.08)
}

.ndlb-nav.prev {
  left: clamp(8px, 2vw, 26px)
}

.ndlb-nav.next {
  right: clamp(8px, 2vw, 26px)
}

/* --- คำบรรยาย --- */
.ndlb-cap {
  padding: 16px clamp(14px, 4vw, 40px) 4px;
  text-align: center;
  font-size: 13.5px;
  line-height: 1.7;
  color: rgba(255, 255, 255, .78);
  max-width: 960px;
  margin: 0 auto;
}

/* --- แถบรูปย่อ --- */
.ndlb-film {
  display: flex;
  gap: 9px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  padding: 14px clamp(14px, 4vw, 40px) 18px;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, .25) transparent;
}

.ndlb-film::-webkit-scrollbar {
  height: 6px
}

.ndlb-film::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, .22);
  border-radius: 99px
}

.ndlb-th {
  position: relative;
  flex: none;
  width: 84px;
  aspect-ratio: 4/3;
  overflow: hidden;
  border-radius: 11px 3px 11px 3px;
  border: 2px solid transparent;
  opacity: .5;
  transition: .3s var(--ease);
  background: rgba(255, 255, 255, .07);
}

.ndlb-th img {
  width: 100%;
  height: 100%;
  object-fit: cover
}

.ndlb-th:hover {
  opacity: .9;
  transform: translateY(-3px)
}

.ndlb-th.on {
  opacity: 1;
  border-color: var(--green-leaf);
  box-shadow: 0 0 0 3px rgba(98, 229, 161, .22)
}

@media (max-width:640px) {
  .ndlb-th {
    width: 62px
  }

  .ndlb-nav {
    width: 44px;
    height: 44px;
    font-size: 14px
  }

  .ndlb-kind {
    display: none
  }

  .ndlb-cap {
    font-size: 12.5px;
    padding-top: 12px
  }
}

@media (prefers-reduced-motion:reduce) {

  .ndlb,
  .ndlb-stage img,
  .ndlb-load span {
    animation: none;
    transition: none
  }
}


.nd-toast {
  position: fixed;
  left: 50%;
  bottom: 28px;
  z-index: 160;
  display: flex;
  align-items: center;
  gap: 10px;
  background: rgba(11, 20, 14, .94);
  color: #fff;
  font-size: 13px;
  padding: 13px 24px;
  border-radius: 100px;
  box-shadow: 0 22px 50px -18px rgba(0, 0, 0, .6);
  opacity: 0;
  visibility: hidden;
  transform: translate(-50%, 16px);
  transition: .4s var(--ease);
}

.nd-toast.show {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0)
}

.nd-toast i {
  color: var(--green-leaf);
  font-size: 14px
}

.nd-fail {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  text-align: center;
  padding: 70px 24px;
  border: 1px dashed var(--line);
  border-radius: 26px 6px 26px 6px;
  background: rgba(255, 255, 255, .5);
}

.nd-fail i {
  font-size: 40px;
  color: var(--violet)
}

.nd-fail b {
  font-weight: 400;
  font-size: 17px
}

.nd-fail span {
  font-size: 13px;
  color: rgba(11, 20, 14, .55)
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
/* จุดพับแถบข้าง ใช้ 1120px เท่ากับหน้าคลังภาพข่าว (ดูบล็อกด้านล่าง) */
@media (max-width:720px) {
  .nd-hero {
    padding: 106px 0 26px
  }

  .nd-title {
    font-size: 23px
  }

  .nd-meta {
    gap: 8px 16px;
    font-size: 12px
  }

  .nd-cover {
    border-radius: 20px 5px 20px 5px
  }

  .nd-gallery {
    grid-template-columns: repeat(auto-fill, minmax(104px, 1fr));
    gap: 8px
  }

  .nd-share {
    padding: 20px 18px
  }

  .nd-h2 {
    font-size: 17px;
    margin: 34px 0 14px
  }
}

/* ============================================================
   PRINT — พิมพ์เฉพาะบทความ
   ============================================================ */
@media print {

  .bg-aurora,
  .read-progress,
  .nd-actionbar,
  .nd-side,
  .nd-totop,
  .nd-share,
  .nd-zoom,
  .nd-pager,
  .nd-related,
  .nd-album-more,
  [data-component="header"],
  [data-component="footer"],
  .ph-orb,
  .skip-link,
  .nd-lightbox,
  .nd-toast {
    display: none !important
  }

  body.page {
    background: #fff;
    color: #000
  }

  .nd-layout {
    grid-template-columns: 1fr;
    gap: 0
  }

  .nd-hero {
    padding: 16px 0 8px
  }

  .nd-title {
    font-size: 22px
  }

  .nd-cover {
    box-shadow: none;
    border: 1px solid #ddd;
    border-radius: 6px
  }

  .nd-content {
    font-size: 12pt;
    line-height: 1.75;
    color: #000
  }

  .nd-gallery {
    grid-template-columns: repeat(4, 1fr)
  }

  .wrap {
    max-width: 100%;
    padding: 0
  }

  a {
    color: #000;
    text-decoration: none
  }

  @page {
    margin: 1.5cm
  }
}

/* ============================================================
   SKELETON — ช่วงกำลังโหลดข้อมูลจาก api/news-detail.php
   หน้านี้เป็น .html ล้วน ข้อมูลจึงมาทีหลัง แถบเทาช่วยกัน
   หน้ากระตุก (CLS) ระหว่างรอ
   ============================================================ */
.nd-sk-t {
  display: block;
  height: 1.28em;
  margin: 0;
  border-radius: 8px 3px 8px 3px;
  background-clip: content-box;
  border-top: .2em solid transparent;
  border-bottom: .2em solid transparent;
  background: linear-gradient(100deg, rgba(20, 168, 98, .10) 30%, rgba(20, 168, 98, .22) 50%, rgba(20, 168, 98, .10) 70%);
  background-size: 220% 100%;
  animation: ndSk 1.25s ease-in-out infinite;
}

.nd-sk-t.w60 {
  width: 60%
}

@keyframes ndSk {
  0% {
    background-position: 180% 0
  }

  100% {
    background-position: -40% 0
  }
}

@media (prefers-reduced-motion:reduce) {
  .nd-sk-t {
    animation: none
  }
}

body.nd-ready .nd-sk-t,
body.nd-failed .nd-sk-t {
  display: none
}

/* ════════════════════════════════════════════════════════════
   ★★ ปรับโฉมใหม่ + ฟังก์ชันเพิ่ม  (ออกแบบสำหรับจอ 1600px)
   ทุกอย่างเป็น CSS ล้วน ไม่มีไลบรารี ไม่มีรูปพื้นหลัง
   จึงไม่กระทบคะแนน Google PageSpeed
   ════════════════════════════════════════════════════════════ */

/* ---------- HERO : ให้ชื่อข่าวเด่นขึ้นบนจอกว้าง ---------- */
.nd-hero {
  padding: 118px 0 30px
}

.nd-hero::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--line), transparent);
}

.nd-title {
  max-width: min(1180px, 92%);
  font-size: clamp(25px, 2.7vw, 44px);
  line-height: 1.28
}

.nd-meta {
  gap: 10px 20px;
  align-items: center
}

.nd-meta>span {
  padding: 7px 14px;
  border-radius: 100px 4px 100px 4px;
  background: rgba(255, 255, 255, .6);
  border: 1px solid var(--line);
  font-size: 12.5px;
}

html[data-theme="dark"] .nd-meta>span {
  background: rgba(255, 255, 255, .05);
  border-color: rgba(163, 79, 214, .2)
}

.nd-left {
  background: linear-gradient(135deg, rgba(156, 63, 204, .13), rgba(42, 216, 127, .13)) !important;
  border-color: rgba(20, 168, 98, .3) !important;
  color: var(--green-deep);
}

.nd-left:empty {
  display: none
}

.nd-left.done {
  background: rgba(20, 168, 98, .16) !important
}

html[data-theme="dark"] .nd-left {
  color: var(--green-leaf)
}

/* ---------- แถบ "อ่านค้างไว้" ---------- */
/* ลอยอยู่มุมจอ ไม่ดันเนื้อหา — หน้าจึงไม่กระตุก (CLS = 0) */
.nd-resume {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 22px;
  z-index: 96;
  pointer-events: none
}

.nd-resume .wrap {
  display: flex;
  justify-content: center
}

.nd-resume-in {
  pointer-events: auto;
  display: inline-flex;
  align-items: center;
  gap: 14px;
  flex: none;
  padding: 13px 18px;
  border-radius: 100px 8px 100px 8px;
  background: rgba(255, 255, 255, .9);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(20, 168, 98, .3);
  box-shadow: var(--shadow-m);
  animation: ndSlide .5s var(--ease) both;
}

html[data-theme="dark"] .nd-resume-in {
  background: rgba(19, 26, 33, .92)
}

@keyframes ndSlide {
  from {
    opacity: 0;
    transform: translateY(14px)
  }

  to {
    opacity: 1;
    transform: none
  }
}

.nd-resume-in>i {
  color: var(--violet);
  font-size: 15px
}

.nd-resume-in b {
  font-weight: 400;
  font-size: 13.5px
}

.nd-resume-go {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  padding: 9px 18px;
  border-radius: 100px 4px 100px 4px;
  color: #fff;
  background: linear-gradient(135deg, var(--violet), var(--green));
  transition: .3s var(--ease);
}

.nd-resume-go:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 30px -14px rgba(20, 168, 98, .7)
}

.nd-resume-x {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  color: rgba(11, 20, 14, .42);
  transition: .3s
}

.nd-resume-x:hover {
  background: rgba(11, 20, 14, .07)
}

html[data-theme="dark"] .nd-resume-x {
  color: rgba(237, 242, 238, .5)
}

/* ---------- แถบเสียงอ่าน ---------- */
.nd-speakbar {
  border-top: 1px solid var(--line);
  margin-top: 11px;
  padding-top: 10px
}

.nd-speakbar-in {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap
}

.nd-speakbar b {
  font-weight: 400;
  font-size: 12.5px;
  color: var(--green-deep)
}

html[data-theme="dark"] .nd-speakbar b {
  color: var(--green-leaf)
}

.nsb-at {
  font-size: 11.5px;
  color: rgba(11, 20, 14, .45);
  font-variant-numeric: tabular-nums
}

.nsb-wave {
  display: flex;
  align-items: flex-end;
  gap: 3px;
  height: 18px
}

.nsb-wave i {
  width: 3px;
  border-radius: 99px;
  background: linear-gradient(180deg, var(--violet), var(--green));
  animation: ndWave .9s ease-in-out infinite;
}

.nsb-wave i:nth-child(1) {
  height: 7px;
  animation-delay: 0s
}

.nsb-wave i:nth-child(2) {
  height: 14px;
  animation-delay: .12s
}

.nsb-wave i:nth-child(3) {
  height: 18px;
  animation-delay: .24s
}

.nsb-wave i:nth-child(4) {
  height: 11px;
  animation-delay: .36s
}

.nsb-wave i:nth-child(5) {
  height: 6px;
  animation-delay: .48s
}

@keyframes ndWave {

  0%,
  100% {
    transform: scaleY(.4)
  }

  50% {
    transform: scaleY(1)
  }
}

.nsb-b {
  width: 34px;
  height: 34px;
  border-radius: 11px 3px 11px 3px;
  display: grid;
  place-items: center;
  background: rgba(255, 255, 255, .8);
  border: 1px solid var(--line);
  font-size: 11px;
  color: rgba(11, 20, 14, .7);
  transition: .3s var(--ease);
}

.nsb-b:hover {
  border-color: var(--green);
  color: var(--green-deep)
}

html[data-theme="dark"] .nsb-b {
  background: rgba(255, 255, 255, .06);
  border-color: rgba(163, 79, 214, .22);
  color: rgba(237, 242, 238, .75)
}

.nsb-rate {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-left: auto
}

.nsb-rate em {
  font-style: normal;
  font-size: 12px;
  min-width: 38px;
  text-align: center;
  font-variant-numeric: tabular-nums
}

@media (prefers-reduced-motion:reduce) {
  .nsb-wave i {
    animation: none
  }
}

/* ---------- หน้าปก (เป็นปุ่มเปิดไลต์บ็อกซ์) ---------- */
.nd-coverbox {
  margin: 0 0 26px
}

.nd-cover {
  display: block;
  width: 100%;
  padding: 0;
  text-align: left;
  cursor: zoom-in;
  margin-bottom: 12px;
  border-radius: 30px 6px 30px 6px;
  box-shadow: var(--shadow-l);
  transition: .45s var(--ease);
}

.nd-cover:hover {
  transform: translateY(-3px);
  box-shadow: 0 48px 100px -46px rgba(15, 45, 28, .6)
}

.nd-cover:focus-visible {
  outline: 3px solid var(--green);
  outline-offset: 4px
}

.nd-cover img {
  transition: transform .7s var(--ease)
}

.nd-cover:hover img {
  transform: scale(1.025)
}

.nd-cover-glow {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(180deg, transparent 52%, rgba(6, 12, 9, .5));
  opacity: 0;
  transition: .4s var(--ease);
}

.nd-cover:hover .nd-cover-glow {
  opacity: 1
}

.nd-zoom {
  width: auto;
  height: auto;
  padding: 11px 18px;
  gap: 10px;
  display: inline-flex;
  align-items: center;
  border-radius: 100px 5px 100px 5px;
  font-size: 13px;
  background: rgba(9, 13, 17, .62);
  border: 1px solid rgba(255, 255, 255, .2);
  transform: translateY(8px);
}

.nd-zoom em {
  font-style: normal
}

.nd-cover:hover .nd-zoom {
  opacity: 1;
  transform: none
}

.nd-cover-all {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 9px 16px;
  border-radius: 100px 5px 100px 5px;
  font-size: 12.5px;
  color: #fff;
  background: rgba(9, 13, 17, .55);
  border: 1px solid rgba(255, 255, 255, .2);
  backdrop-filter: blur(8px);
  transition: .35s var(--ease);
}

.nd-cover-all em {
  font-style: normal
}

.nd-cover:hover .nd-cover-all {
  background: linear-gradient(135deg, var(--violet), var(--green));
  border-color: transparent
}

/* ---------- อัลบั้มรูป : ภาพแรกใหญ่ 2×2 ---------- */
.nd-album-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap
}

.nd-album-head .nd-h2 {
  margin-bottom: 16px
}

.nd-album-all {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 12.5px;
  padding: 10px 18px;
  border-radius: 100px 4px 100px 4px;
  margin-bottom: 16px;
  background: rgba(255, 255, 255, .78);
  border: 1px solid var(--line);
  color: rgba(11, 20, 14, .72);
  transition: .32s var(--ease);
}

.nd-album-all i {
  color: var(--green-deep);
  font-size: 12px
}

.nd-album-all:hover {
  background: linear-gradient(135deg, var(--violet), var(--green));
  color: #fff;
  border-color: transparent;
  transform: translateY(-2px)
}

.nd-album-all:hover i {
  color: #fff
}

html[data-theme="dark"] .nd-album-all {
  background: rgba(255, 255, 255, .06);
  border-color: rgba(163, 79, 214, .22);
  color: rgba(237, 242, 238, .75)
}

.nd-gthumb {
  position: relative;
  cursor: zoom-in;
  aspect-ratio: 1/1;
  border-radius: 18px 5px 18px 5px
}

.nd-gthumb.big {
  grid-column: span 2;
  grid-row: span 2;
  border-radius: 28px 6px 28px 6px
}

.gt-veil {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(6, 12, 9, .34) 0%, transparent 38%, transparent 62%, rgba(6, 12, 9, .42) 100%);
  opacity: 0;
  transition: .35s var(--ease);
}

.nd-gthumb:hover .gt-veil {
  opacity: 1
}

.gt-no {
  position: absolute;
  top: 9px;
  left: 9px;
  z-index: 2;
  min-width: 24px;
  height: 24px;
  padding: 0 7px;
  display: grid;
  place-items: center;
  border-radius: 8px 3px 8px 3px;
  font-size: 11px;
  color: #fff;
  background: rgba(9, 13, 17, .5);
  backdrop-filter: blur(6px);
  opacity: 0;
  transform: translateY(-4px);
  transition: .32s var(--ease);
  font-variant-numeric: tabular-nums;
}

.nd-gthumb:hover .gt-no {
  opacity: 1;
  transform: none
}

.nd-gthumb .gt-zoom {
  position: absolute;
  right: 9px;
  bottom: 9px;
  z-index: 2;
  width: 34px;
  height: 34px;
  border-radius: 11px 3px 11px 3px;
  display: grid;
  place-items: center;
  font-size: 12px;
  color: #fff;
  background: rgba(9, 13, 17, .5);
  backdrop-filter: blur(6px);
  opacity: 0;
  transform: translateY(6px);
  transition: .32s var(--ease);
}

.nd-gthumb:hover .gt-zoom {
  opacity: 1;
  transform: none
}

.nd-gthumb:focus-visible {
  outline: 3px solid var(--green);
  outline-offset: 3px
}

.nd-album-more em {
  font-style: normal;
  opacity: .62;
  margin-left: 4px
}

@media (hover:none) {

  .gt-no,
  .nd-gthumb .gt-zoom {
    opacity: 1;
    transform: none
  }
}

@media (max-width:560px) {
  .nd-gthumb.big {
    grid-column: span 2;
    grid-row: span 2
  }
}

/* ---------- สารบัญในแถบข้าง ---------- */
.nd-toc {
  max-height: min(52vh, 460px);
  overflow-y: auto;
  scrollbar-width: thin;
  padding-right: 2px
}

.ndt-a {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 11px;
  padding: 9px 10px 9px 4px;
  border-radius: 4px 12px 12px 4px;
  font-size: 12.5px;
  line-height: 1.6;
  color: rgba(11, 20, 14, .6);
  transition: .3s var(--ease);
}

.ndt-a.lv3 {
  padding-left: 20px;
  font-size: 12px;
  opacity: .86
}

.ndt-dot {
  flex: none;
  width: 7px;
  height: 7px;
  margin-top: 6px;
  border-radius: 50%;
  background: rgba(11, 20, 14, .18);
  transition: .3s var(--ease);
}

.ndt-a:hover {
  background: rgba(20, 168, 98, .07);
  color: var(--green-deep)
}

.ndt-a.on {
  color: var(--green-deep);
  background: linear-gradient(115deg, rgba(156, 63, 204, .09), rgba(42, 216, 127, .09))
}

.ndt-a.on .ndt-dot {
  background: linear-gradient(135deg, var(--violet), var(--green));
  box-shadow: 0 0 0 4px rgba(42, 216, 127, .16)
}

html[data-theme="dark"] .ndt-a {
  color: rgba(237, 242, 238, .6)
}

html[data-theme="dark"] .ndt-a.on {
  color: var(--green-leaf)
}

/* ---------- ป้ายลอยตอนเลือกข้อความ ---------- */
.nd-sel {
  position: fixed;
  z-index: 120;
  display: flex;
  gap: 4px;
  padding: 5px;
  border-radius: 14px 4px 14px 4px;
  background: rgba(16, 22, 18, .94);
  border: 1px solid rgba(255, 255, 255, .14);
  box-shadow: 0 22px 48px -20px rgba(0, 0, 0, .6);
  animation: ndSelIn .2s var(--ease) both;
}

@keyframes ndSelIn {
  from {
    opacity: 0;
    transform: translateY(6px) scale(.96)
  }

  to {
    opacity: 1;
    transform: none
  }
}

.nd-sel button {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 11.5px;
  color: rgba(255, 255, 255, .86);
  padding: 8px 13px;
  border-radius: 10px 3px 10px 3px;
  transition: .24s var(--ease);
  white-space: nowrap;
}

.nd-sel button:hover {
  background: rgba(255, 255, 255, .14);
  color: #fff
}

.nd-sel button i {
  font-size: 11px
}

@media (max-width:640px) {
  .nd-sel {
    display: none
  }
}

/* ---------- แผ่นทางลัดแป้นพิมพ์ ---------- */
.nd-keys {
  position: fixed;
  inset: 0;
  z-index: 190;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(6, 10, 8, .72);
  backdrop-filter: blur(8px);
  animation: ndlbIn .24s var(--ease) both;
}

.ndk-card {
  position: relative;
  width: min(560px, 100%);
  max-height: 86vh;
  overflow: auto;
  padding: 32px 34px;
  border-radius: 30px 8px 30px 8px;
  background: var(--paper);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-l);
}

html[data-theme="dark"] .ndk-card {
  background: #121820;
  border-color: rgba(163, 79, 214, .24)
}

.ndk-card h3 {
  font-weight: 400;
  font-size: 17px;
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px
}

.ndk-card h3 i {
  width: 38px;
  height: 38px;
  border-radius: 12px 3px 12px 3px;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, var(--violet), var(--green));
  color: #fff;
  font-size: 14px;
}

.ndk-card ul {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 9px 18px
}

.ndk-card li {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 12.5px;
  color: rgba(11, 20, 14, .66)
}

html[data-theme="dark"] .ndk-card li {
  color: rgba(237, 242, 238, .66)
}

.ndk-card kbd {
  font-family: inherit;
  font-size: 11.5px;
  min-width: 28px;
  padding: 5px 9px;
  text-align: center;
  border-radius: 8px 3px 8px 3px;
  background: rgba(255, 255, 255, .9);
  border: 1px solid var(--line);
  box-shadow: 0 2px 0 rgba(15, 45, 28, .1);
}

html[data-theme="dark"] .ndk-card kbd {
  background: rgba(255, 255, 255, .08);
  border-color: rgba(163, 79, 214, .24)
}

.ndk-note {
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px dashed var(--line);
  font-size: 11.5px;
  color: rgba(11, 20, 14, .5);
  display: flex;
  align-items: center;
  gap: 7px;
  flex-wrap: wrap;
}

html[data-theme="dark"] .ndk-note {
  color: rgba(237, 242, 238, .5)
}

.ndk-x {
  position: absolute;
  top: 18px;
  right: 18px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  color: rgba(11, 20, 14, .45);
  transition: .3s var(--ease);
}

.ndk-x:hover {
  background: rgba(11, 20, 14, .08);
  transform: rotate(90deg)
}

html[data-theme="dark"] .ndk-x {
  color: rgba(237, 242, 238, .55)
}

@media (max-width:520px) {
  .ndk-card ul {
    grid-template-columns: 1fr
  }
}

.nd-tool.ndk {
  padding: 10px 14px
}

.nd-tool.ndk span {
  display: none
}

@media (max-width:900px) {
  .nd-tool.ndk {
    display: none
  }
}

/* ---------- ปุ่มขึ้นบนสุด + วงแหวนความคืบหน้า ---------- */
.nd-totop {
  position: relative;
  background: none;
  box-shadow: none;
  width: 54px;
  height: 54px
}

.nd-totop::before {
  content: "";
  position: absolute;
  inset: 5px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--violet), var(--green));
  box-shadow: 0 16px 34px -14px rgba(80, 120, 160, .75);
}

.nd-totop i {
  position: relative;
  z-index: 2
}

.ndt-ring {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  transform: rotate(-90deg)
}

.ndt-ring circle {
  fill: none;
  stroke-width: 2.4;
  stroke-linecap: round
}

.ndt-bg {
  stroke: rgba(255, 255, 255, .28)
}

.ndt-fg {
  stroke: #fff;
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
  transition: stroke-dashoffset .12s linear
}


/* ---------- โหมดอ่านสบายตา ---------- */
body.nd-focus .nd-side,
body.nd-focus .bg-aurora,
body.nd-focus [data-component="footer"] {
  opacity: .12;
  filter: saturate(.2);
  transition: .5s var(--ease)
}

body.nd-focus .nd-side:hover,
body.nd-focus [data-component="footer"]:hover {
  opacity: 1;
  filter: none
}

body.nd-focus .nd-layout {
  grid-template-columns: minmax(0, 1fr) var(--side-w)
}

body.nd-focus .nd-content {
  font-size: calc(var(--art-fs) + 1px);
  line-height: 2.05;
  max-width: 80ch
}

body.nd-focus .nd-hero {
  padding-top: 96px
}

/* ============================================================
   ★ ปรับสัดส่วน — ใช้ความกว้างเดียวกับหน้าคลังภาพข่าว
   ============================================================ */
@media (min-width:1200px) {
  .nd-rel-grid {
    gap: 22px
  }

  .nd-side {
    gap: 18px
  }
}

@media (max-width:1120px) {
  .nd-layout {
    grid-template-columns: 1fr
  }

  .nd-side {
    position: static;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-top: 34px
  }

  .nd-toc-card {
    grid-column: 1/-1
  }
}

@media (max-width:720px) {
  .nd-side {
    grid-template-columns: 1fr
  }

  .nd-hero {
    padding-top: 96px
  }

  .nd-resume-in {
    flex-wrap: wrap
  }

  .nd-resume-go {
    margin-left: 0;
    width: 100%;
    justify-content: center
  }

  .nd-gallery {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px
  }

  .nd-cover-all {
    top: 10px;
    right: 10px;
    padding: 7px 13px;
    font-size: 11.5px
  }

  .nd-zoom {
    padding: 9px 14px;
    font-size: 12px
  }
}

/* ---------- พิมพ์ : ซ่อนของใหม่ทั้งหมด ---------- */
@media print {

  .nd-sel,
  .nd-keys,
  .ndlb,
  .nd-resume,
  .nd-speakbar,
  .nd-toc-card,
  .nd-album-all,
  .nd-left {
    display: none !important
  }

  .nd-cover {
    box-shadow: none !important;
    transform: none !important
  }
}

/* ============================================================
   ★ กันหน้ากระตุกตอนข้อมูลมาถึง (Cumulative Layout Shift = 0)
   จองที่ว่างไว้ล่วงหน้าให้เท่าของจริง แล้วปล่อยเมื่อโหลดเสร็จ
   ============================================================ */
.nd-title {
  min-height: calc(3 * 1.28em)
}

/* จองที่ไว้ 3 บรรทัด — ชื่อข่าวมาแล้วหน้าไม่ขยับ */
body:not(.nd-ready):not(.nd-failed) .nd-sdgs {
  min-height: 58px
}

body:not(.nd-ready):not(.nd-failed) .nd-content {
  min-height: 62vh
}

body:not(.nd-ready):not(.nd-failed) .nd-meta>span:not(.nd-left) {
  opacity: .45
}

.nd-content {
  content-visibility: auto;
  contain-intrinsic-size: auto 1200px
}

.nd-album,
.nd-related,
.nd-share {
  content-visibility: auto;
  contain-intrinsic-size: auto 620px
}

/* ป้ายหมวดหมู่ : ตรึงความสูงไว้ เพราะข้อความจะเปลี่ยนหลังโหลดข้อมูล */
.nd-cat {
  height: 40px;
  padding: 0 18px;
  line-height: 1
}

.nd-meta>span {
  min-height: 36px
}