/* ===========================================================================
   RentSpace 2.1.90 — ชั้นกลางของทั้งระบบ (โหลดท้ายสุดจาก base.html)
   ---------------------------------------------------------------------------
   ไฟล์นี้ครอบ "ทุกหน้า" เพราะทุกหน้า extends base.html — สิ่งที่แก้ที่นี่จึงมีผล
   กับทั้ง 114 หน้าพร้อมกัน รวมถึงหน้าที่ไฟล์ไม่ได้อยู่ในชุดแพตช์
   ตั้งใจไม่ไปทับสีหรือระยะของหน้าใดหน้าหนึ่ง (เสี่ยงพังแบบมองไม่เห็น) —
   ทำเฉพาะเรื่องที่เป็นระบบจริงๆ: การเปลี่ยนหน้า, สถานะโหลด, โฟกัส, เป้ากด, มอชัน
   =========================================================================== */

/* ---------- 1) เปลี่ยนหน้าแบบไม่มีจอขาววาบ ----------
   View Transitions API สำหรับเว็บหลายหน้า — เบราว์เซอร์ที่รองรับจะเฟดหน้าเก่า→ใหม่ให้เอง
   เบราว์เซอร์ที่ไม่รองรับข้ามกฎนี้ไปเฉยๆ ไม่ต้องมี fallback JS */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation-duration: 90ms; }
::view-transition-new(root) { animation-duration: 120ms; }

/* ---------- 2) แถบความคืบหน้าบนสุด (แทนจอทึบเต็มจอตอนกดลิงก์) ---------- */
.zn-progress {
  position: fixed; inset: 0 auto auto 0; height: 3px; width: 0;
  z-index: 100000; pointer-events: none; border-radius: 0 3px 3px 0;
  background: linear-gradient(90deg, #35B6C9, #4ECFBD 60%, #A7E3A0);
  box-shadow: 0 0 10px rgba(78, 207, 189, .55);
  opacity: 0; transition: width .18s ease, opacity .25s ease;
}
.zn-progress.on { opacity: 1; }

/* ---------- 3) แจ้งเตือนมุมจอ (ใช้กับดาวน์โหลด/ข้อผิดพลาด) ---------- */
.zn-toasts {
  position: fixed; z-index: 100001; right: 16px; display: flex; flex-direction: column; gap: 8px;
  bottom: calc(16px + env(safe-area-inset-bottom, 0px)); max-width: min(92vw, 380px);
}
.zn-toast {
  display: flex; gap: 10px; align-items: flex-start;
  padding: 12px 14px; border-radius: 14px; font-size: 13px; line-height: 1.55;
  background: rgba(252, 253, 255, .96); color: #0F1E2E;
  border: 1px solid rgba(255, 255, 255, .7);
  box-shadow: 0 2px 6px rgba(6, 18, 30, .12), 0 18px 40px rgba(6, 18, 30, .28);
  backdrop-filter: blur(18px) saturate(180%); -webkit-backdrop-filter: blur(18px) saturate(180%);
  transform: translateY(8px); opacity: 0; transition: transform .2s ease, opacity .2s ease;
}
.zn-toast.on { transform: none; opacity: 1; }
.zn-toast b { display: block; font-weight: 800; margin-bottom: 1px; }
.zn-toast-body { min-width: 0; }
.zn-toast-note { color: #4F6173; font-size: 12px; }
.zn-toast-err { border-left: 4px solid #C4453B; }
.zn-toast-ok { border-left: 4px solid #217A47; }
.zn-toast-run { border-left: 4px solid #1E7FA8; }
.zn-toast-x {
  margin-left: auto; border: 0; background: transparent; cursor: pointer; color: #4F6173;
  font-size: 15px; line-height: 1; padding: 2px 4px; border-radius: 6px; min-width: 28px; min-height: 28px;
}
.zn-toast-x:hover { background: rgba(15, 30, 46, .07); color: #0F1E2E; }
.zn-toast .zn-retry {
  margin-top: 7px; border: 1px solid rgba(15, 30, 46, .16); background: #fff; color: #0F1E2E;
  font: inherit; font-size: 12px; font-weight: 700; border-radius: 999px; padding: 5px 12px; cursor: pointer;
}
.zn-toast .zn-retry:hover { background: rgba(15, 30, 46, .06); }
.zn-spin {
  width: 15px; height: 15px; flex: 0 0 auto; margin-top: 2px; border-radius: 50%;
  border: 2px solid rgba(30, 127, 168, .25); border-top-color: #1E7FA8;
  animation: znSpin .7s linear infinite;
}
@keyframes znSpin { to { transform: rotate(360deg); } }

/* ---------- 4) โฟกัสที่มองเห็นได้ทั้งระบบ (WCAG 2.2 Focus Appearance) ----------
   เดิมมีแค่ 10 ไฟล์ที่เขียนเอง หน้าที่เหลือกด Tab แล้วไม่รู้ว่าอยู่ตรงไหน */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 2px solid #35B6C9 !important;
  outline-offset: 2px !important;
  border-radius: 8px;
}
/* ข้ามลิงก์ไปเนื้อหาหลัก — คนใช้คีย์บอร์ดไม่ต้อง Tab ผ่านเมนูทุกครั้ง */
.zn-skip {
  position: fixed; top: 8px; left: 8px; z-index: 100002; transform: translateY(-160%);
  background: #0B7C6F; color: #fff; font-weight: 700; font-size: 13px;
  padding: 10px 16px; border-radius: 999px; text-decoration: none; transition: transform .16s ease;
}
.zn-skip:focus { transform: none; }

/* ---------- 5) เป้ากดบนมือถือ ----------
   ปุ่ม/ลิงก์ที่เป็นไอคอนเล็กๆ ในตารางกดยากมากบนจอสัมผัส */
@media (max-width: 640px) and (pointer: coarse) {
  :where(button, .btn, a.btn, [role="button"]):not(.zn-toast-x):not(.zn-keep-size) {
    min-height: 40px;
  }
}
/* 2.2.0 — ขยับเป้ากดบนอุปกรณ์สัมผัสจาก 40px เป็น 44px และครอบถึงแท็บเล็ต (900px)
   40px ผ่านเกณฑ์ WCAG 2.2 AA (24x24) อยู่แล้ว แต่ 44px คือขนาดที่คู่มือ iOS/Android แนะนำ
   และเป็นเกณฑ์ AAA — จำกัดไว้ที่ pointer:coarse เท่านั้น เครื่องที่ใช้เมาส์ความหนาแน่นเท่าเดิม */
@media (max-width: 900px) and (pointer: coarse) {
  :where(button, .btn, a.btn, [role="button"], select,
         input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"])
        ):not(.zn-toast-x):not(.zn-keep-size) {
    min-height: 44px;
  }
}
/* 2.2.0 — ลิงก์เลขเอกสารในตารางรายการ วัดได้ 89x14 px = สูงไม่ถึง 24px
   ตกเกณฑ์ WCAG 2.2 AA ข้อ 2.5.8 Target Size (Minimum) ของจริง (ไม่ใช่แค่ต่ำกว่าที่นิ้วกดสบาย)
   เป็นลิงก์เดี่ยวในเซลล์ตาราง ไม่ใช่ลิงก์ในประโยค จึงไม่เข้าข้อยกเว้น "inline"
   ขยายพื้นที่กดด้วย padding บนอุปกรณ์สัมผัสเท่านั้น — บนเครื่องที่ใช้เมาส์แถวยังแน่นเท่าเดิม
   ใช้ inline-flex เพื่อให้ความสูงมีผลจริงกับ <a> ที่เป็น inline */
.rv-doc-link, .ent-doc-link {
  display: inline-flex; align-items: center; min-height: 24px; padding: 5px 2px;
}
/* ลิงก์ในข้อความ "ยังไม่มีข้อมูล" — วัดได้ 83x15 px
   เป็นลิงก์ในประโยคจึงเข้าข้อยกเว้น inline ของ 2.5.8 อยู่แล้ว แต่ทำให้กดง่ายขึ้นได้ฟรี */
.empty-state a, .ent-empty a {
  display: inline-flex; align-items: center; min-height: 36px; padding: 0 2px;
}

/* ---------- 6) มอชัน: เคารพการตั้งค่าของผู้ใช้ ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important; animation-iteration-count: 1 !important;
    transition-duration: .001ms !important; scroll-behavior: auto !important;
  }
  @view-transition { navigation: none; }
}

/* ---------- 7) รูปภาพ: กันหน้ากระตุกตอนรูปโหลดเสร็จ ----------
   49 <img> ในระบบไม่ได้ระบุความสูง/ความกว้าง พอรูปมาถึงเนื้อหาจึงกระโดด */
img { max-width: 100%; }
img:not([width]):not([height]):not(.zn-keep-size) { height: auto; }

/* ---------- 8) โครงร่างตอนโหลด (ใช้แทนจอว่าง) ---------- */
.zn-skeleton {
  background: linear-gradient(90deg, rgba(15,30,46,.06), rgba(15,30,46,.11), rgba(15,30,46,.06));
  background-size: 200% 100%; animation: znShimmer 1.1s linear infinite; border-radius: 10px;
}
@keyframes znShimmer { to { background-position: -200% 0; } }

/* ---------- 9) เครื่องที่แรงน้อย: ลดกระจกลงเพื่อความลื่น ----------
   backdrop-filter หลายชั้นบนเครื่องเก่าทำให้เลื่อนหน้าหนืด — ตัดเบลอออกเมื่อจอเล็กและ
   เครื่องรายงานว่าหน่วยความจำน้อย (ตั้งคลาสนี้จาก zenith-nav-1.js) */
body.zn-lowfx .card, body.zn-lowfx .zn-toast { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }
body.zn-lowfx .zn-toast { background: #fff; }

/* ---------- 10) 2.1.91 — ปุ่มหลัก: ตัวหนังสือขาวต้องอ่านออกจริง ----------
   วัดด้วยพิกเซลที่เรนเดอร์จริง (ถ่ายภาพหน้าเว็บโดยให้ตัวหนังสือโปร่งใส แล้วอ่านสีพื้น
   ใต้ข้อความ) พบว่า .btn-accent เดิม linear-gradient(#0EA5A2 → #0B7C6F) ปลายสว่าง
   ให้คอนทราสต์กับตัวหนังสือขาวแค่ 3.0-4.3 ต่ำกว่าเกณฑ์ WCAG 2.2 AA ที่ต้องได้ 4.5
   ปุ่มนี้ใช้ทั่วทั้งระบบ จึงแก้ที่เดียวให้ผ่านทุกหน้าพร้อมกัน

   ทำอะไร: ลดความสว่างของไล่สีลง คงเฉดเทอร์ควอยซ์เดิมไว้ ไม่แตะขนาด/รูปทรง/พฤติกรรม
   ถอนคืน: ลบบล็อกนี้ทิ้ง กลับไปใช้ไล่สีของ theme-zenith-1.css ทันที */
.btn-accent {
  background: linear-gradient(150deg, #0A7F76, #075F55);
}
.btn-accent:hover {
  background: linear-gradient(150deg, #0C8C82, #086A5F);
}

/* วงกลมย่อชื่อผู้ใช้บนแถบเมนู ใช้ไล่สีเดียวกับปุ่มหลัก จึงมีปัญหาเดียวกัน (วัดได้ 3.5-3.7) */
.sidebar-avatar { background: linear-gradient(155deg, #0A7F76, #075F55); }

/* 2.1.91 — เป้ากดบนมือถือ: รอบก่อนครอบแค่ปุ่ม ยังไม่ครอบช่องกรอก/ดรอปดาวน์
   วัดที่ 390px พบ <select>/<input> สูง 34px ซึ่งต่ำกว่าเกณฑ์ 40px ที่ตั้งไว้เอง */
@media (max-width: 640px) and (pointer: coarse) {
  :where(input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]), select, textarea):not(.zn-keep-size) {
    min-height: 40px;
  }
}

/* ---------- 11) 2.1.95 — ปุ่มโครงร่างบนแถบหัวหน้า ----------
   ธีมให้ปุ่มพวกนี้เป็นแผ่นขาวจาง 16% + ตัวหนังสือขาว วางบนพื้นกรมท่า ซึ่งอ่านออกดี
   ตราบใดที่พื้นข้างหลังยังเข้ม — แต่ธีมมีก้อนแสงสีฟ้า-เขียวลอยอยู่ด้วย ตรงที่ก้อนแสง
   พาดผ่าน พื้นจะสว่างขึ้นจนขาวบนขาวจางวัดได้ 4.49 ต่ำกว่าเกณฑ์ WCAG 2.2 AA (4.5)
   เป็นทุกหน้าที่มีปุ่มแบบนี้บนหัว ไม่ใช่เฉพาะหน้าใดหน้าหนึ่ง

   ทำอะไร: สลับแผ่นรองจาง "ขาว" เป็น "กรมท่าเข้ม" แล้วเพิ่มความชัดของเส้นขอบ
   ค่าคอนทราสต์จึงไม่ขึ้นกับว่าก้อนแสงอยู่ตรงไหนอีกต่อไป
   ถอนคืน: ลบบล็อกนี้ทิ้ง กลับไปใช้ของ theme-zenith-1.css ทันที */
.main-content > .topbar .btn-outline,
.main-content > .topbar > div > .btn-outline {
  background: rgba(9, 20, 34, .45);
  border-color: rgba(255, 255, 255, .42);
}
.main-content > .topbar .btn-outline:hover,
.main-content > .topbar > div > .btn-outline:hover {
  background: rgba(9, 20, 34, .68);
  border-color: rgba(255, 255, 255, .66);
  color: #fff;
}

/* ---------- 12) 2.1.96 — หน้ารายการเอกสาร: จุดที่ธีมกับ CSS รายหน้าทับกันไปมา ----------
   ลำดับโหลดจริงคือ  css รายหน้า → ent-apple.css → theme-zenith-1.css → ไฟล์นี้
   สีที่ยังตกเกณฑ์หลังแก้ตัวแปรกลางแล้ว เป็นเพราะถูกทับจาก 2 ชั้นหลัง จึงต้องมาปิดท้ายที่นี่
   ทุกค่าด้านล่างมาจากการวัดพิกเซลจริงบนหน้าที่มีข้อมูล 120 แถว ไม่ใช่คำนวณบนพื้นขาว */
:root {
  --ent-muted: #5b5f66;      /* เดิม #767A82 วัดได้ 4.31 (ข้อความ "~วันที่ประมาณ" บนแถวขาว) */
}
/* ป้ายสถานะ — theme-zenith ทับสีไว้ (#A2640A วัดได้ 4.04 · #6B7B8C วัดได้ 3.56) */
.ent-badge.ent-badge-awaiting { color: #7d4b07; }
.ent-badge.ent-badge-draft    { color: #7d4b07; }
.ent-badge.ent-badge-overdue  { color: #9e0010; }
.ent-badge.ent-badge-paid     { color: #0f5c31; }
.ent-badge.ent-badge-cancelled,
.ent-badge.ent-badge-void     { color: #454b52; }
/* ปุ่มยกเลิกในแถว — ของเดิมประกาศเป็น !important จึงต้องสู้ด้วย !important */
.ent-action-btn.ent-act-void { color: #a8352c !important; }
/* ตัวหนังสือรองบนแถบหัวหน้า (พื้นกรมท่า) ขาว 56% วัดได้ 4.35
   ธีมประกาศเป็น `.main-content > .topbar .ent-title-en { ... !important }` ต้องสู้ด้วยชั้นเดียวกัน */
.main-content > .topbar .ent-title-en { color: rgba(255, 255, 255, .82) !important; }
/* ป้ายวิธีชำระเงินในหน้าใบเสร็จ — #b45309 บนพื้นส้มอ่อนของตัวเองวัดได้ 4.02 */
.ent-pay-badge.ent-pay-cash { color: #8f4000; }

/* 2.1.96 — จุดที่เหลือบนจอมือถือของหน้ารายการเอกสาร (วัดที่ 390px พร้อมข้อมูล 120 แถว)
   บนมือถือตารางเปลี่ยนเป็นการ์ด ผิวการ์ดเข้มกว่าพื้นตารางบนจอกว้าง (#bcc0c7 เทียบกับ #fff)
   สีตัวหนังสือรองที่ผ่านบนจอกว้างจึงตกเกณฑ์ตรงนี้ */
.ent-client-sub, .ent-client-sub .ent-shop-ic { color: #45454b; }
/* คำอธิบายใต้หัวหน้าอยู่บนพื้นกรมท่าที่มีก้อนแสงพาดผ่าน ขาว 78% วัดได้ 4.46
   หน้ารายการใช้คลาส .ent-subtitle ซึ่งธีมประกาศแยกไว้อีกกฎหนึ่ง ต้องคุมทั้งสองชื่อ */
.main-content > .topbar .page-subtitle,
.main-content > .topbar .ent-subtitle,
.main-content > .topbar > div > .ent-subtitle { color: rgba(255, 255, 255, .88) !important; }

/* ============================================================================
   2.1.98 — แถบหัวหน้าที่ "ไม่ได้เป็นลูกโดยตรง" ของ .main-content
   กฎด้านบนใช้ `>` (ลูกโดยตรง) จึงไม่ครอบหน้าที่ห่อเนื้อหาไว้อีกชั้นก่อน เช่น
   หน้าจัดการค่าเช่ารายวันที่ครอบทั้งหน้าด้วย .dr-bleed เพื่อทะลุกรอบ 1200px
   ผลคือหัวข้อรองกับคำอธิบายของหน้านั้นยังเป็นสีตัวอักษรสำหรับ "พื้นขาว"
   ทั้งที่วางอยู่บนพื้นกรมท่า — วัดจากพิกเซลจริงได้ 1.93–2.40 : 1 (ต้อง 4.5)
   เปลี่ยนเป็นลูกหลานระดับใดก็ได้ · ทุก .topbar ใน .main-content คือหัวหน้าเว็บ
   ที่วางบนพื้นกรมท่าเสมอ กฎจึงถูกต้องกับทุกหน้า รวมหน้าที่จะเพิ่มมาในอนาคต
   ครอบชื่อคลาสหัวข้อรองของแต่ละหน้าด้วย (-title-en ทุกตัว)
   ============================================================================ */
.main-content .topbar .page-subtitle,
.main-content .topbar .ent-subtitle,
.main-content .topbar .dr-subtitle,
.main-content .topbar .drs-subtitle { color: rgba(255, 255, 255, .88) !important; }
.main-content .topbar .page-subtitle b,
.main-content .topbar .page-subtitle strong { color: #FFFFFF !important; }
.main-content .topbar .ent-title-en,
.main-content .topbar .dr-title-en,
.main-content .topbar .drs-title-en { color: rgba(255, 255, 255, .82) !important; }
/* หัวเรื่องหลักก็โดนปัญหาเดียวกัน — วัดได้ 1.27 : 1 (ตัวหนังสือเกือบดำบนพื้นกรมท่า)
   ธีมประกาศไว้เป็น `.main-content > .topbar` เท่านั้น หน้าที่ห่ออีกชั้นจึงไม่ได้สีขาว
   .topbar ไม่เคยอยู่ในการ์ด กฎนี้จึงไม่ไปแตะหัวเรื่องในการ์ดที่ต้องเป็นสีเข้ม */
/* 2.2.1 — บางหน้าใช้ .page-header แทน .topbar เป็นแถบหัวหน้า (เช่นหน้าเนื้อหาหน้าเว็บ)
   ธีมเขียนกฎไว้เฉพาะ .topbar หัวเรื่องของหน้าพวกนั้นจึงเป็นสีเข้มลอยบนพื้นกรมท่า
   วัดได้ 1.22 : 1 (หัวเรื่อง) และ 2.29 : 1 (คำอธิบาย) — ครอบ .page-header ด้วยชุดเดียวกัน */
.main-content .page-header .page-title { color: var(--zn-on-dark, #FFFFFF) !important;
  text-shadow: 0 2px 26px rgba(6, 18, 30, .55); }
.main-content .page-header .page-subtitle { color: rgba(255, 255, 255, .88) !important; }
.main-content .topbar .page-title,
.main-content .topbar .ent-title {
  color: var(--zn-on-dark, #FFFFFF) !important;
  text-shadow: 0 2px 26px rgba(6, 18, 30, .55);
}


/* ============================================================================
   2.2.0 — แถบเมนูบน: ชื่อหมวดที่กำลังเปิดอยู่ (.active)
   ธีมให้พื้นเป็นสีฟ้าโปร่ง 14% ซึ่งไปทับบนแถบเมนูที่เป็นแผ่นโปร่งอีกที
   สีพื้นจริงที่ตาเห็นจึงออกมาเป็น #b5c5db (เข้มกว่าที่ตั้งใจมาก) ตัวหนังสือสีฟ้าเข้ม
   วัดจากพิกเซลจริงได้ 3.66–3.69 : 1 ตกเกณฑ์ AA — และเป็นแบบนี้ทุกหน้าในระบบ
   แก้โดยให้พื้นของแท็บที่เปิดอยู่เป็นสีทึบ คุมค่าได้แน่นอนไม่ว่าแถบเมนูจะโปร่งแค่ไหน
   ยังคงสีเน้นของระบบไว้ที่ตัวหนังสือกับเส้นใต้เหมือนเดิม
   ============================================================================ */
.topnav-menu > .topnav-dropdown > .topnav-dropdown-trigger.active,
.topnav-dropdown-trigger.active {
  background: #EEF3FB;
}
/* ลูกศรพับหัวข้อในแถบข้างของหน้าวาดผัง — วัดได้ 4.49 : 1 ขาดไปนิดเดียว */
.zn-sec-head .zn-caret { color: #5A5F64; }

/* ============================================================================
   2.3.0 — พื้นหลังหน้าเว็บเปลี่ยนจากกรมท่าเข้มเป็นเทาอ่อน (#F5F5F7)
   ----------------------------------------------------------------------------
   ไฟล์นี้กับ theme-zenith-1.css มีกฎที่กำหนดสีขาวตรงๆ ให้กับ "ตัวหนังสือที่ลอยอยู่
   บนพื้นหลัง" กระจายอยู่หลายจุด (หัวเรื่อง คำโปรย ตัวย่อภาษาอังกฤษ ปุ่มบนแถบหัวหน้า)
   ทุกกฎเขียนถูกแล้วสำหรับพื้นกรมท่า แต่พอพื้นกลายเป็นเทาอ่อนก็คือขาวบนขาว มองไม่เห็น
   วัดจากพิกเซลจริงก่อนแก้: หัวเรื่อง 1.09:1 · คำโปรย 1.06:1 · ตัวย่อ 1.07:1

   แทนที่จะไล่แก้ทีละกฎในสองไฟล์ (เสี่ยงตกหล่นและกลับไปธีมเดิมยาก) รวบไว้ที่ท้ายไฟล์นี้
   ซึ่งเป็นสไตล์ชีตแผ่นสุดท้ายที่โหลด จึงชนะด้วยลำดับ cascade ปกติ
   ทุกค่าอ่านจากโทเคน --zn-on-dark* ชุดเดียวกับที่ธีมประกาศไว้ เปลี่ยนที่เดียวจบ
   ถ้าจะกลับไปเป็นธีมกรมท่า: ลบบล็อกนี้ทิ้งทั้งก้อน แล้วคืนค่าโทเคนใน theme-zenith-1.css
   ============================================================================ */

/* ---- หัวเรื่องหลัก ---- */
.main-content .topbar .page-title,
.main-content .topbar .ent-title,
.main-content > .topbar > div > .page-title,
.main-content > .page-title,
.main-content .page-header .page-title {
  color: var(--zn-on-dark, #1D1D1F) !important;
  /* เงาฟุ้งใต้ตัวอักษรมีไว้ให้หัวเรื่องขาวลอยเหนือพื้นเข้ม บนพื้นสว่างกลายเป็นรอยเปื้อนเทา */
  text-shadow: none !important;
}

/* ---- คำโปรยใต้หัวเรื่อง ---- */
.main-content .topbar .page-subtitle,
.main-content .topbar .ent-subtitle,
.main-content .topbar .dr-subtitle,
.main-content .topbar .drs-subtitle,
.main-content > .page-subtitle,
.main-content > .topbar > div > .page-subtitle,
.main-content > .topbar > div > .ent-subtitle,
.main-content .page-header .page-subtitle {
  color: var(--zn-on-dark-2, #4A4A4F) !important;
}
.main-content .topbar .page-subtitle b,
.main-content .topbar .page-subtitle strong { color: var(--zn-on-dark, #1D1D1F) !important; }

/* ---- ตัวย่อภาษาอังกฤษข้างหัวเรื่อง ---- */
.main-content .topbar .ent-title-en,
.main-content .topbar .dr-title-en,
.main-content .topbar .drs-title-en,
.main-content > .topbar .ent-title-en {
  color: var(--zn-on-dark-3, #6E6E73) !important;
}

/* ---- หน้าว่าง / ท้ายหน้า ---- */
.main-content > .empty-state { color: var(--zn-on-dark-2, #4A4A4F) !important; }
.site-footer {
  color: var(--zn-on-dark-3, #6E6E73) !important;
  border-top-color: rgba(15, 30, 46, .12) !important;
}

/* ---- ปุ่มบนแถบหัวหน้า ----
   ของเดิมเป็นกระจกขาวโปร่ง 16% + ตัวอักษรขาว ออกแบบมาให้อ่านบนพื้นกรมท่า
   บนพื้นเทาอ่อนมันกลายเป็นปุ่มเทาจางตัวหนังสือขาว วัดได้ 2.4:1 */
.main-content > .topbar .btn-outline,
.main-content > .topbar > div > .btn-outline,
.main-content .topbar .btn-outline {
  background: #FFFFFF !important;
  border-color: rgba(15, 30, 46, .16) !important;
  color: #1D1D1F !important;
}
.main-content > .topbar .btn-outline:hover,
.main-content > .topbar > div > .btn-outline:hover,
.main-content .topbar .btn-outline:hover {
  background: #FFFFFF !important;
  border-color: rgba(15, 30, 46, .34) !important;
  color: #1D1D1F !important;
}

/* ---- การ์ด ----
   บนพื้นเทาอ่อน การ์ดขาวต่างจากพื้นแค่ 1.09:1 ถ้าไม่มีเส้นขอบจะกลืนกันจนไม่รู้ว่าการ์ดจบตรงไหน */
.card, .ent-card, .zn-card {
  border: 1px solid var(--zn-line, rgba(15,30,46,.10));
}