/* ══════════════════════════════════════════════════════════════
   VIHOKNEWS — ธีมเหลือง-ดำ (Catalogue Yellow Border + Readability Fix)
   อัปเดต: แก้ไขข้อความสีแดงให้อ่านง่ายบนพื้นดำ + กรอบเหลืองทุก Catalogue
   ══════════════════════════════════════════════════════════════ */

/* ──────────────────────────────────────────
   1. COLOR VARIABLES
   ────────────────────────────────────────── */
:root {
  --vihok-yellow:   #FFC700; /* สีเหลืองหลัก */
  --vihok-black:    #121212; /* สีดำหลัก (พื้นหลังหลัก) */
  --vihok-black2:   #000000; /* สีดำสนิท */
  --vihok-card-bg:  #1E1E1E; /* สีดำเทาสำหรับกล่องการ์ด */
  --vihok-border:   #FFC700; /* เส้นขอบสีเหลืองหลัก */
  --vihok-hover:    #B8860B; /* สีเหลืองเข้มสำหรับ Hover */
  --vihok-text-main:#FFFFFF; /* สีตัวหนังสือหลัก */
  --vihok-text-sub: #D1D1D1; /* สีตัวหนังสือเนื้อหา */
}

/* ──────────────────────────────────────────
   2. GLOBAL COLOR RESET & TITLE READABILITY (แก้หัวข้อสีแดง)
   ────────────────────────────────────────── */
html, 
body, 
#page, 
#content, 
.site-content, 
.main-container,
.site-main,
#primary,
#secondary,
.container,
.wrapper {
  background-color: var(--vihok-black) !important;
  color: var(--vihok-text-sub) !important;
}

/* หัวข้อทุกระดับ ลิงก์ และชื่อข่าว (บังคับทับสีแดงเดิมให้อ่านง่าย) */
h1, h2, h3, h4, h5, h6,
h1 a, h2 a, h3 a, h4 a, h5 a, h6 a,
.entry-title, 
.entry-title a,
.post-title,
.post-title a,
.columnstyle1__title, .columnstyle1__title *,
.columnstyle2__title, .columnstyle2__title *,
.columnstyle3__title, .columnstyle3__title *,
.columnstyle4__title, .columnstyle4__title *,
.news-title, .news-title a,
.title-news, .title-news a,
[style*="color: red"],
[style*="color:red"],
[style*="color: #f00"],
[style*="color:#f00"],
[style*="color: #ff0000"],
[style*="color:#ff0000"],
[style*="color: #e53935"],
[style*="color: #d32f2f"] {
  color: var(--vihok-text-main) !important; /* ปรับเป็นสีขาวสว่างอ่านง่าย */
  font-weight: 600 !important;
}

/* ลิงก์ทั่วไป */
a {
  color: var(--vihok-text-main) !important;
  transition: color 0.2s ease-in-out;
}

/* เอฟเฟกต์ชี้เมาส์ที่หัวข้อและลิงก์ (เปลี่ยนเป็นสีเหลือง) */
a:hover,
h1 a:hover, h2 a:hover, h3 a:hover, h4 a:hover,
.entry-title a:hover, .post-title a:hover,
.columnstyle1__row:hover .columnstyle1__title *,
.columnstyle2__row:hover .columnstyle2__title *,
.columnstyle3:hover .columnstyle3__title *,
.column:hover .columnstyle4__title * {
  color: var(--vihok-yellow) !important;
}

/* ──────────────────────────────────────────
   3. HEADER & NAVIGATION
   ────────────────────────────────────────── */
.header,
.headerres, 
.headerres__menu {
  background-color: var(--vihok-black) !important;
}
.header .fa,
.header i,
.headerresmenu__list .icon {
  color: var(--vihok-yellow) !important;
}
.headerresmenu__list .text {
  color: var(--vihok-text-main) !important;
}

.headerbottom {
  background-color: var(--vihok-black) !important;
  border-bottom: 4px solid var(--vihok-yellow) !important;
}

.headernav__list .text--name,
.headernav__list .text--icon {
  color: var(--vihok-text-main) !important;
}
.headernav__list:hover .text--name,
.headernav__list:hover .text--icon,
a:hover .headernav__list .text--name,
a:hover .headernav__list .text--icon {
  color: var(--vihok-yellow) !important;
}

.headersearch__input {
  background-color: var(--vihok-card-bg) !important;
  color: var(--vihok-text-main) !important;
  border: 1.5px solid var(--vihok-yellow) !important;
}
.headersearch__icon {
  color: var(--vihok-yellow) !important;
}

/* ──────────────────────────────────────────
   4. CATALOGUE, CARDS & WIDGETS (กรอบสีเหลือง)
   ────────────────────────────────────────── */
.catheader__topic,
.columnstyle1__row,
.columnstyle2__row,
.columnstyle3,
.columnstyle4,
.news-card,
.card,
.widget,
.cat-item,
.category-box,
.catalogue-item,
.post-item,
.archive-card {
  background-color: var(--vihok-card-bg) !important;
  border: 2px solid var(--vihok-yellow) !important;
  border-radius: 8px !important;
  transition: border-color 0.25s ease, box-shadow 0.25s ease !important;
}

.columnstyle1__row:hover,
.columnstyle2__row:hover,
.columnstyle3:hover,
.columnstyle4:hover,
.news-card:hover,
.card:hover,
.widget:hover,
.cat-item:hover,
.category-box:hover {
  border-color: #FFE066 !important;
  box-shadow: 0 0 10px rgba(255, 199, 0, 0.3) !important;
}

/* หัวข้อหมวดหมู่ประจำ Catalogue */
.catheader__topic {
  border-left: 6px solid var(--vihok-yellow) !important;
}
.catheader__topic .text,
.catheader__topic h2,
.catheader__topic h3 {
  color: var(--vihok-yellow) !important;
  font-weight: 700 !important;
}

.widget-title,
.sidebar .title {
  border-bottom: 2px solid var(--vihok-yellow) !important;
  color: var(--vihok-yellow) !important;
}

/* ──────────────────────────────────────────
   5. ARTICLE CONTENT (เนื้อหาบทความ single.php)
   ────────────────────────────────────────── */
.content__title h1 {
  border-left: 5px solid var(--vihok-yellow) !important;
  padding-left: 14px !important;
  color: var(--vihok-text-main) !important;
}
.content__nav {
  border-left: 3px solid var(--vihok-yellow) !important;
  padding-left: 10px !important;
  color: var(--vihok-text-sub) !important;
}
.content__description .fa {
  color: var(--vihok-yellow) !important;
}

.entry-content, 
.entry-content p, 
.content__description,
.content__description p {
  color: var(--vihok-text-sub) !important;
  line-height: 1.7;
}

/* กำจัดสีตัวอักษรและสีพื้นหลังที่ติดมาจาก Rich Text Editor */
.entry-content p,
.entry-content span,
.entry-content div,
.entry-content font {
  background-color: transparent !important;
}

/* บังคับแก้เฉพาะ Font ที่โดนตั้งค่าสีแดงใน Rich Text ให้กลายเป็นสีสว่าง */
.entry-content [style*="color: red"],
.entry-content [style*="color:red"],
.entry-content font[color="red"],
.entry-content font[color="#ff0000"] {
  color: var(--vihok-yellow) !important;
}

blockquote {
  background-color: var(--vihok-card-bg) !important;
  border: 1px solid var(--vihok-yellow) !important;
  border-left: 5px solid var(--vihok-yellow) !important;
  color: var(--vihok-text-main) !important;
}

/* ปุ่มแชร์ */
.contentshare__button--facebook {
  background-color: var(--vihok-black) !important;
  border: 2px solid #1877F2 !important;
  color: #1877F2 !important;
}
.contentshare__button--twitter {
  background-color: var(--vihok-black) !important;
  border: 2px solid var(--vihok-yellow) !important;
  color: var(--vihok-yellow) !important;
}
.contentshare__button--google {
  background-color: var(--vihok-black) !important;
  border: 2px solid #DB4437 !important;
  color: #DB4437 !important;
}

/* การแบ่งหน้า (Pagination) */
.catpagination a {
  background-color: var(--vihok-black) !important;
  color: var(--vihok-yellow) !important;
  border: 2px solid var(--vihok-yellow) !important;
  border-radius: 4px;
}
.catpagination a:hover,
.catpagination .current {
  background-color: var(--vihok-yellow) !important;
  color: #000000 !important;
}

/* ──────────────────────────────────────────
   6. FORM ELEMENTS & BUTTONS
   ────────────────────────────────────────── */
input[type="text"],
input[type="search"],
textarea,
select {
  background-color: var(--vihok-card-bg) !important;
  color: var(--vihok-text-main) !important;
  border: 1.5px solid var(--vihok-yellow) !important;
  border-radius: 4px;
}

input[type="text"]:focus,
input[type="search"]:focus,
textarea:focus {
  border-color: #FFE066 !important;
  box-shadow: 0 0 6px rgba(255, 199, 0, 0.4) !important;
  outline: none !important;
}

input[type="submit"],
button,
.button {
  background-color: var(--vihok-yellow) !important;
  color: #000000 !important;
  font-weight: bold !important;
  border: none !important;
  border-radius: 4px;
  transition: background-color 0.2s ease;
}

input[type="submit"]:hover,
button:hover,
.button:hover {
  background-color: var(--vihok-hover) !important;
  color: var(--vihok-text-main) !important;
}

/* ──────────────────────────────────────────
   7. FOOTER
   ────────────────────────────────────────── */
.footer {
  background-color: var(--vihok-black) !important;
}
.footernavsocial__column i {
  color: var(--vihok-yellow) !important;
}

.footer div[style*="background: #333"] {
  background-color: var(--vihok-black2) !important;
  border-top: 4px solid var(--vihok-yellow) !important;
  color: #FFFFFF !important;
}