/*!
Theme Name: yeddi
Theme URI: https://xn--l3ca4b6dsc1b.com/
Author: yeddi
Author URI: https://xn--l3ca4b6dsc1b.com/
Description: yeddi
Version: 1.0.0
Text Domain: yeddi
Tags: custom-background

*/

/* thai */
@font-face {
  font-family: "Kanit";
  font-style: normal;
  font-weight: 400;
  src: url(./assets/fonts/nKKZ-Go6G5tXcraBGwCYdA.woff2) format("woff2");
  unicode-range: U+02D7, U+0303, U+0331, U+0E01-0E5B, U+200C-200D, U+25CC;
  font-display: swap;
}
/* latin */
@font-face {
  font-family: "Kanit";
  font-style: normal;
  font-weight: 400;
  src: url(./assets/fonts/nKKZ-Go6G5tXcraVGwA.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
  font-display: swap;
}
/* thai (bold) */
@font-face {
  font-family: "Kanit";
  font-style: normal;
  font-weight: 700;
  src: url(./assets/fonts/nKKU-Go6G5tXcr4uPhWzVaF5NQ.woff2) format("woff2");
  unicode-range: U+02D7, U+0303, U+0331, U+0E01-0E5B, U+200C-200D, U+25CC;
  font-display: swap;
}
/* latin-ext (bold) */
@font-face {
  font-family: "Kanit";
  font-style: normal;
  font-weight: 700;
  src: url(./assets/fonts/nKKU-Go6G5tXcr4uPhWpVaF5NQ.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
  font-display: swap;
}
/* latin (bold) */
@font-face {
  font-family: "Kanit";
  font-style: normal;
  font-weight: 700;
  src: url(./assets/fonts/nKKU-Go6G5tXcr4uPhWnVaE.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
  font-display: swap;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

* {
  margin: 0;
  padding: 0;
}

/* Disable image dragging */
img {
  -webkit-user-drag: none !important;
  -khtml-user-drag: none !important;
  -moz-user-drag: none !important;
  -o-user-drag: none !important;
  user-drag: none !important;
  pointer-events: auto !important;
}

img,
.post-thumbnail img,
.post-thumbnail,
.video-player img,
.entry-content img,
.content img {
  -webkit-user-drag: none !important;
  -khtml-user-drag: none !important;
  -moz-user-drag: none !important;
  -o-user-drag: none !important;
  user-drag: none !important;
  -webkit-user-select: none !important;
  -moz-user-select: none !important;
  -ms-user-select: none !important;
  user-select: none !important;
}

/* Disable tooltips (title attribute) */
*[title] {
  position: relative;
}

*[title]:hover::after,
*[title]:focus::after {
  display: none !important;
  content: none !important;
}

/* Disable native browser tooltips */
*[title] {
  pointer-events: auto;
}

/* Alternative: Remove title on hover using JavaScript fallback */
*[title] {
  cursor: pointer;
}

/* Main Background */
html,
body {
  height: 100%;
  background-color: #000000 !important;
  color: #ffffff !important;
}

#page,
.site {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background-color: #000000 !important;
  color: #ffffff !important;
}

/* Header */
header,
.site-header {
  background-color: #000000 !important;
  color: #ffffff !important;
}

.site-branding {
  background-color: transparent !important;
  color: #ffffff !important;
}

.site-branding.box {
  background-color: transparent !important;
  border: none !important;
  border-bottom: 1px solid #2a2a2a !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 1rem !important;
  margin-bottom: 1rem !important;
  position: relative;
}

.site-branding.box::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    #ff8c42 10%,
    #ff6600 50%,
    #ff8c42 90%,
    transparent 100%
  );
  opacity: 0.3;
}

/* Navbar inside box should not have border */
.site-branding.box .navbar {
  background-color: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

/* Navbar standalone */
.navbar:not(.site-branding .navbar) {
  background-color: #1a1a1a !important;
  color: #ffffff !important;
  border: 1px solid #2a2a2a !important;
  border-radius: 8px !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5) !important;
}

.box {
  background-color: #1a1a1a !important;
  color: #ffffff !important;
  border: 1px solid #2a2a2a !important;
  border-radius: 8px !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5) !important;
  padding: 1rem !important;
  margin-bottom: 1rem !important;
}

/* Nested boxes should not have double borders */
.box .box {
  border: none !important;
  box-shadow: none !important;
}

.navbar-item,
.navbar-link,
.navbar-burger {
  color: #ffffff !important;
  transition: color 0.2s ease;
  outline: none !important;
  box-shadow: none !important;
  border: none !important;
}

.navbar-item:hover,
.navbar-link:hover {
  color: #ff8c42 !important;
}

.navbar-item:focus,
.navbar-item:focus-visible,
.navbar-item:active,
.navbar-link:focus,
.navbar-link:focus-visible,
.navbar-link:active {
  outline: none !important;
  box-shadow: none !important;
  border: none !important;
  background-color: transparent !important;
}

/* Navbar Menu Items Styling - Match Footer Style */
.navbar-start {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  width: 100%;
}

.navbar-start .navbar-item {
  color: #ffffff !important;
  font-weight: normal;
  transition: color 0.2s ease;
  padding: 0.5rem 1rem;
  margin: 0 0.25rem;
  background-color: transparent !important;
  border: none !important;
  box-shadow: none !important;
  outline: none !important;
}

.navbar-start .navbar-item:hover {
  color: #ff8c42 !important;
  background-color: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

.navbar-burger span {
  background-color: #ffffff !important;
}

/* Site Content */
.site-content {
  flex: 1;
  background-color: transparent !important;
  color: #ffffff !important;
}

.container {
  background-color: transparent !important;
  color: #ffffff !important;
}

/* Latest Videos Section */
.latest-videos {
  margin-top: 1rem !important;
  padding-top: 1rem !important;
}

.latest-videos .block-title.mb-3 {
  margin-bottom: 0.75rem !important;
}

/* Section title — แถบส้มข้างหัวข้อ + เส้นแบ่งสไตล์เดียวกับ .video-tags */
.block-title {
  position: relative;
  padding-bottom: 0.75rem;
}

.block-title h2.is-size-5.has-text-light {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-weight: 700;
  padding-bottom: 0;
}

/* แถบตั้งสีส้มมนๆ พอดีความสูงตัวอักษร */
.block-title h2.is-size-5.has-text-light::before {
  content: "";
  display: inline-block;
  width: 5px;
  height: 1.05em;
  border-radius: 6px;
  background: hsl(
    var(--bulma-primary-h),
    var(--bulma-primary-s),
    var(--bulma-primary-l)
  );
}

/* เส้นแบ่งใต้หัวข้อ — เหมือน .video-tags.tags::before เป๊ะ */
.block-title::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 1px;
  background: linear-gradient(
    to right,
    transparent,
    hsla(
        var(--bulma-primary-h),
        var(--bulma-primary-s),
        var(--bulma-primary-l),
        0.55
      )
      25%,
    hsla(
        var(--bulma-primary-h),
        var(--bulma-primary-s),
        var(--bulma-primary-l),
        0.35
      )
      55%,
    transparent
  );
}

/* Alternative Style 2: With decorative elements on sides */
/* Uncomment to use this style instead */
/*
.block-title h2.is-size-5.has-text-light::before,
.block-title h2.is-size-5.has-text-light::after {
  content: '';
  position: absolute;
  bottom: 2px;
  width: 30px;
  height: 2px;
  background: #ff8c42;
  border-radius: 2px;
}

.block-title h2.is-size-5.has-text-light::before {
  left: -40px;
}

.block-title h2.is-size-5.has-text-light::after {
  right: -40px;
}
*/

/* Alternative Style 3: Dashed line */
/* Uncomment to use this style instead */
/*
.block-title h2.is-size-5.has-text-light::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 3px;
  background: repeating-linear-gradient(
    to right,
    #ff8c42 0px,
    #ff8c42 10px,
    transparent 10px,
    transparent 20px
  );
  border-radius: 2px;
}
*/

/* Alternative Style 4: Double line */
/* Uncomment to use this style instead */
/*
.block-title h2.is-size-5.has-text-light::before,
.block-title h2.is-size-5.has-text-light::after {
  content: '';
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
  background: #ff8c42;
  border-radius: 2px;
}

.block-title h2.is-size-5.has-text-light::before {
  bottom: 4px;
  opacity: 0.6;
}

.block-title h2.is-size-5.has-text-light::after {
  bottom: 0;
}
*/

/* Special Navigation */
.specialNav {
  background-color: transparent !important;
  margin-bottom: 1rem !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-start !important;
  align-items: center !important;
  width: 100% !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

.specialNav > * {
  margin-bottom: 0.5rem !important;
  width: 100% !important;
}

.specialNav > *:last-child {
  margin-bottom: 0 !important;
}

.homeTopWrapper {
  /* background-color: #1a1a1a !important; */
  color: #ffffff !important;
  /* border: 1px solid #2a2a2a !important; */
  border-radius: 8px !important;
  padding: 0.75rem 1rem !important;
  margin-bottom: 0.5rem !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5) !important;
  display: block;
}

.homeTopWrapper .buttons {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 0.5rem !important;
  flex-wrap: wrap !important;
  width: 100% !important;
}

/* Mobile Navigation Bar - แสดงเฉพาะมือถือ */
.mobile-nav-bar {
  display: none !important;
  position: fixed !important;
  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  background: linear-gradient(180deg, #1a1a1a 0%, #0f0f0f 100%) !important;
  border-top: 2px solid transparent !important;
  background-image: linear-gradient(#1a1a1a, #0f0f0f),
    linear-gradient(90deg, transparent 0%, #ff8c42 50%, transparent 100%) !important;
  background-origin: border-box !important;
  background-clip: padding-box, border-box !important;
  padding: 0.75rem 0.5rem !important;
  margin-bottom: 0 !important;
  box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.8),
    0 -2px 10px rgba(255, 140, 66, 0.2) !important;
  z-index: 9999 !important;
  backdrop-filter: blur(10px) !important;
}

.mobile-nav-container {
  display: flex !important;
  justify-content: space-around !important;
  align-items: center !important;
  width: 100% !important;
  gap: 0 !important;
  position: relative !important;
}

.mobile-nav-item {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.25rem !important;
  padding: 0.625rem 0.5rem !important;
  min-width: 0 !important;
  text-decoration: none !important;
  color: #ffffff !important;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
  border-radius: 8px !important;
  flex: 1 !important;
  position: relative !important;
}

/* เส้นแบ่งระหว่างปุ่ม */
.mobile-nav-item:not(:last-child)::after {
  content: "" !important;
  position: absolute !important;
  right: 0 !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: 1px !important;
  height: 60% !important;
  background: linear-gradient(
    180deg,
    transparent 0%,
    rgba(255, 140, 66, 0.3) 20%,
    rgba(255, 140, 66, 0.5) 50%,
    rgba(255, 140, 66, 0.3) 80%,
    transparent 100%
  ) !important;
  opacity: 0.6 !important;
}

.mobile-nav-item:hover {
  background: linear-gradient(
    180deg,
    rgba(255, 140, 66, 0.15) 0%,
    rgba(255, 140, 66, 0.05) 100%
  ) !important;
  color: #ff8c42 !important;
  transform: translateY(-2px) !important;
}

.mobile-nav-item:active {
  transform: translateY(0) !important;
  background: linear-gradient(
    180deg,
    rgba(255, 140, 66, 0.25) 0%,
    rgba(255, 140, 66, 0.1) 100%
  ) !important;
}

.mobile-nav-icon {
  width: 22px !important;
  height: 22px !important;
  font-size: 1.35rem !important;
  margin-bottom: 0.125rem !important;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3)) !important;
}

.mobile-nav-item:hover .mobile-nav-icon {
  transform: scale(1.15) translateY(-2px) !important;
  filter: drop-shadow(0 4px 8px rgba(255, 140, 66, 0.4)) !important;
}

.mobile-nav-text {
  font-size: 0.6875rem !important;
  line-height: 1.3 !important;
  text-align: center !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  max-width: 100% !important;
  color: inherit !important;
  font-weight: 500 !important;
  letter-spacing: 0.02em !important;
  transition: all 0.3s ease !important;
}

.mobile-nav-item:hover .mobile-nav-text {
  text-shadow: 0 0 8px rgba(255, 140, 66, 0.5) !important;
}

/* Icon Colors */
.mobile-nav-icon-red {
  color: #ff6347 !important;
}

.mobile-nav-icon-orange {
  color: #ffd700 !important;
}

.mobile-nav-icon-pink {
  color: #ff69b4 !important;
}

.mobile-nav-icon-blue {
  color: #4a90e2 !important;
}

/* Home Navigation Item - เด่นแต่เข้ากัน */
.mobile-nav-item-home {
  transform: scale(1.05) !important;
}

.mobile-nav-item-home .mobile-nav-icon {
  font-size: 1.45rem !important;
  width: 24px !important;
  height: 24px !important;
}

.mobile-nav-item-home .mobile-nav-text {
  font-weight: 600 !important;
  font-size: 0.7rem !important;
  color: #4a90e2 !important;
}

.mobile-nav-item-home:hover {
  background: linear-gradient(
    180deg,
    rgba(74, 144, 226, 0.15) 0%,
    rgba(74, 144, 226, 0.05) 100%
  ) !important;
  transform: scale(1.08) translateY(-2px) !important;
  color: #4a90e2 !important;
}

.mobile-nav-item-home:hover .mobile-nav-icon {
  transform: scale(1.1) translateY(-2px) !important;
  filter: drop-shadow(0 2px 6px rgba(74, 144, 226, 0.5)) !important;
}

.mobile-nav-item-home:hover .mobile-nav-text {
  color: #5ba0f2 !important;
}

/* Home Top Buttons — พื้นดำเข้าชุดกัน + ไอคอนสีเฉพาะ + hover เรืองแสงตามสี */
.home-top-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0.7rem 1.5rem !important;
  font-weight: 600 !important;
  text-decoration: none !important;
  border-radius: 10px !important;
  transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease,
    background-color 0.2s ease !important;
  min-width: 160px !important;
  color: #f0f0f0 !important;
  background: #1c1c1c !important;
  border: 1px solid #333 !important;
}

.home-top-btn,
.home-top-btn:hover,
.home-top-btn:focus,
.home-top-btn:active {
  color: #f0f0f0 !important;
}

.home-top-btn i {
  font-size: 1.05rem !important;
  transition: transform 0.2s ease !important;
}

/* hover ร่วม: ยกขึ้นเล็กน้อย + พื้นสว่างขึ้น + ไอคอนขยาย */
.home-top-btn:hover {
  transform: translateY(-2px) !important;
  background: #242424 !important;
}

.home-top-btn:hover i {
  transform: scale(1.15) !important;
}

/* --- สีเฉพาะแต่ละปุ่ม (ไอคอน + ขอบ/แสงตอน hover) --- */

/* คลิปหลุดยอดนิยม — ส้มไฟ */
.home-top-btn-popular i {
  color: #ff5b2e !important;
}
.home-top-btn-popular:hover {
  border-color: #ff5b2e !important;
  box-shadow: 0 6px 20px rgba(255, 91, 46, 0.28) !important;
}

/* คลิปหลุดไทย — ทอง */
.home-top-btn-thai i {
  color: #ffc93c !important;
}
.home-top-btn-thai:hover {
  border-color: #ffc93c !important;
  box-shadow: 0 6px 20px rgba(255, 201, 60, 0.28) !important;
}
.home-top-btn-thai:hover i {
  transform: rotate(15deg) scale(1.15) !important;
}

/* หลุด Onlyfans — ชมพู */
.home-top-btn-onlyfans i {
  color: #ff5fa2 !important;
}
.home-top-btn-onlyfans:hover {
  border-color: #ff5fa2 !important;
  box-shadow: 0 6px 20px rgba(255, 95, 162, 0.28) !important;
}

/* Telegram — ฟ้า */
.home-top-btn-telegram i {
  color: #33a8e6 !important;
}
.home-top-btn-telegram:hover {
  border-color: #33a8e6 !important;
  box-shadow: 0 6px 20px rgba(51, 168, 230, 0.28) !important;
}

/* Responsive */
@media (max-width: 768px) {
  /* แสดง Mobile Navigation Bar เฉพาะบนมือถือ */
  .mobile-nav-bar {
    display: block !important;
  }

  /* เพิ่ม padding-bottom ให้ body เพื่อไม่ให้เนื้อหาถูกบังโดย mobile nav bar */
  body {
    padding-bottom: 70px !important;
  }

  .home-top-btn {
    min-width: 140px !important;
    padding: 0.625rem 1.25rem !important;
    font-size: 0.9rem !important;
  }
}

/* Buttons */
.button {
  color: #ffffff !important;
  transition: all 0.2s ease;
}

.button.is-dark {
  background-color: #1a1a1a !important;
  border-color: #333333 !important;
  color: #ffffff !important;
}

.button.is-dark:hover {
  background-color: #ff8c42 !important;
  border-color: #ff8c42 !important;
  color: #000000 !important;
}

/* Override for tags inside tags-scroll */
.tags-scroll .button.is-dark {
  border: none !important;
  color: #ffffff !important;
}

.tags-scroll .button.is-dark:hover {
  background: #ff8c42 !important;
  border: none !important;
  color: #000000 !important;
}

.button:hover {
  color: #ff8c42 !important;
}

/* Input & Search */
.input,
.textarea,
.select select {
  background-color: #1a1a1a !important;
  border-color: #333333 !important;
  color: #ffffff !important;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.input:focus,
.textarea:focus,
.select select:focus {
  background-color: #1f1f1f !important;
  border-color: #ff8c42 !important;
  color: #ffffff !important;
  box-shadow: 0 0 0 0.125em rgba(255, 140, 66, 0.25) !important;
}

.input::placeholder,
.textarea::placeholder {
  color: #999999 !important;
}

/* Not Found / No Results Page */
.no-results,
.not-found {
  background-color: transparent !important;
  color: #ffffff !important;
  padding: 3rem 1rem;
  min-height: 400px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

/* Remove box background for not-found pages */
.error-404 .box,
.not-found .box,
.site-main.box .error-404,
.site-main.box .not-found {
  background-color: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

/* Remove box background when main has error-404 class */
body.error404 .site-main.box,
body.error404 main.box {
  background-color: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

.no-results header,
.not-found header {
  margin-bottom: 2rem;
  position: relative;
  padding-bottom: 1rem;
}

.no-results header::after,
.not-found header::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 60%;
  height: 3px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255, 140, 66, 0.5) 15%,
    #ff8c42 30%,
    #ff6600 50%,
    #ff8c42 70%,
    rgba(255, 140, 66, 0.5) 85%,
    transparent 100%
  );
  border-radius: 3px;
  box-shadow: 0 2px 8px rgba(255, 140, 66, 0.4);
}

.no-results h1,
.not-found h1,
.no-results .title,
.not-found .title {
  color: #ffffff !important;
  font-weight: 600;
  font-size: 1.75rem !important;
  background-color: transparent !important;
  background: transparent !important;
  margin-bottom: 0 !important;
  padding: 0 !important;
  border: none !important;
  box-shadow: none !important;
}

.no-results header,
.not-found header {
  background-color: transparent !important;
  background: transparent !important;
}

.no-results .content p,
.not-found .content p {
  color: #cccccc !important;
  font-size: 1.1rem;
  line-height: 1.6;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}

.no-results .button,
.not-found .button {
  background-color: #ff8c42 !important;
  border-color: #ff8c42 !important;
  color: #000000 !important;
}

.no-results .button:hover,
.not-found .button:hover {
  background-color: #ff6600 !important;
  border-color: #ff6600 !important;
  color: #ffffff !important;
}

/* Search Results */
#results,
#mobile-search-results,
.search-results {
  background-color: #1a1a1a !important;
  border: 1px solid #333333 !important;
  border-top: 2px solid #ff8c42 !important;
  color: #ffffff !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.7) !important;
}

/* Text Colors */
p,
h1,
h2,
h3,
h4,
h5,
h6,
span,
div {
  color: #ffffff !important;
}

/* Links - Orange Theme */
a {
  color: #ff8c42 !important;
  transition: color 0.2s ease;
}

a:hover {
  color: #ff6600 !important;
}

a:visited {
  /* color: #ff8c42 !important; */
}

/* Links that should keep primary color */
.has-text-primary,
.search-result-cate {
  color: #ff8c42 !important;
}

.has-text-primary:hover,
.search-result-cate:hover {
  color: #ff6600 !important;
}

/* Footer */
footer {
  padding: 3rem 1.5rem 3.5rem !important;
  background-color: #000000 !important;
  color: #ffffff !important;
  margin-top: auto;
}

footer .content p,
footer .content {
  color: #ffffff !important;
}

footer nav a {
  color: #ffffff !important;
  transition: color 0.2s ease;
}

footer nav a:hover {
  color: #ff8c42 !important;
}

/*  body.tag */
body.tag {
  background-color: initial;
  display: block;
  font-size: initial;
  white-space: initial;
  height: initial;
  padding: initial;
  color: var(--bulma-body-color);
  border-radius: initial;
}

/** Loop Video **/

.loop-video .post-header {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.post-thumbnail {
  position: relative;
}

.post-thumbnail {
  border-radius: 5px;
  overflow: hidden;
}

.post-thumbnail img {
  width: 100%;
  display: block;
}

.post-category {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 10;
  text-transform: uppercase;
  padding: 4px 10px;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.2;
  color: #ffffff !important;
  background-color: rgba(255, 140, 66, 0.9);
  border-radius: 4px;
  box-shadow: none !important;
  transition: background-color 0.2s ease;
}

.post-category:hover {
  background-color: rgba(255, 140, 66, 1);
  box-shadow: none !important;
}

.post-category span {
  color: #ffffff !important;
  display: inline-block;
}

.post-duration {
  border-radius: 5px;
  padding: 3px 6px;
  font-size: 14px;
  line-height: 1rem;
  color: #ffffff;
  background: rgba(255, 140, 66, 0.9);
  bottom: 5px;
  right: 5px;
  position: absolute;
  z-index: 5;
}

.post-duration span {
  color: #ffffff;
}

.post-views {
  border-radius: 5px;
  padding: 3px 6px;
  font-size: 14px;
  line-height: 1rem;
  color: #ffffff;
  background: rgba(255, 140, 66, 0.9);
  bottom: 5px;
  left: 5px;
  position: absolute;
  z-index: 5;
}

.post-views i {
  font-size: 12px;
  margin-right: 3px;
  color: #ffffff;
}

.post-views span {
  color: #ffffff;
}

.thumb-block .post-header h3 {
  color: hsl(0, 0%, 100%);
  transition: color 0.2s ease; /* Add transition for smooth color change */
}

.thumb-block a:hover .post-header h3 {
  color: #ff8c42 !important;
}

/* Hot Videos */
.hot-videos {
  margin-bottom: 1rem !important;
  padding-bottom: 1rem !important;
  border-bottom: 1px solid #333333 !important;
}

.hot-videos.mb-4 {
  margin-bottom: 1rem !important;
}

.hot-videos .block-title.mb-3 {
  margin-bottom: 0.75rem !important;
}

.hot-video-loop.is-skeleton {
  max-width: 255px;
  margin-right: 10px;
}

.swiper-container {
  width: 100%;
  overflow: hidden;
}

.responsive-player {
  height: 550px;
}

@media (max-width: 480px) {
  .responsive-player {
    height: 250px;
  }
}

/* ===== ส่วนรายละเอียดคลิป ===== */
.video-descriptions .description-title h2 {
  display: inline-flex;
  align-items: center;
  font-weight: 700;
  margin-bottom: 0;
}

.video-descriptions .description-title h2 i {
  color: hsl(
    var(--bulma-primary-h),
    var(--bulma-primary-s),
    var(--bulma-primary-l)
  );
}

.video-descriptions .content {
  background: #161616;
  border: 1px solid #2a2a2a;
  border-left: 3px solid
    hsl(var(--bulma-primary-h), var(--bulma-primary-s), var(--bulma-primary-l));
  border-radius: 8px;
  padding: 1rem 1.15rem !important;
  color: #cfcfcf;
  line-height: 1.85;
  font-size: 0.95rem;
  word-break: break-word;
  overflow-wrap: anywhere;
}

.video-descriptions .content p {
  margin: 0;
}

/* คำค้นหาในหน้าผลการค้นหา — เน้นสีส้ม */
.category-title .search-query {
  color: hsl(
    var(--bulma-primary-h),
    var(--bulma-primary-s),
    var(--bulma-primary-l)
  );
}

/* ===== หัวข้อหน้าหมวดหมู่ — ใช้ภาษาดีไซน์เดียวกับ block-title ===== */
.category-title-section {
  position: relative;
  padding-bottom: 0.75rem !important;
}

/* เส้นใต้ไล่เฉดส้ม — เหมือน .block-title และ .video-tags */
.category-title-section::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 1px;
  background: linear-gradient(
    to right,
    transparent,
    hsla(
        var(--bulma-primary-h),
        var(--bulma-primary-s),
        var(--bulma-primary-l),
        0.55
      )
      25%,
    hsla(
        var(--bulma-primary-h),
        var(--bulma-primary-s),
        var(--bulma-primary-l),
        0.35
      )
      55%,
    transparent
  );
}

/* "หมวดหมู่" — ป้ายกำกับเล็กๆ สีจาง */
.category-subtitle {
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #888;
}

/* ชื่อหมวด — แถบส้มซ้ายเหมือนหัวข้อ section อื่น */
.category-title {
  position: relative;
  display: inline-flex;
  align-items: center;
  padding-left: 0.75rem;
}

.category-title::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.12em;
  bottom: 0.12em;
  width: 5px;
  border-radius: 6px;
  background: hsl(
    var(--bulma-primary-h),
    var(--bulma-primary-s),
    var(--bulma-primary-l)
  );
}

/* ===== พิลล์มาตรฐาน: ป้ายจำนวนคลิป + แท็ก ใช้ทรงเดียวกัน ===== */
.category-count {
  display: inline-flex;
  align-items: center;
  font-size: 0.8rem;
  font-weight: 600;
  line-height: 1;
  padding: 0.45em 0.9em;
  border-radius: 999px;
  color: #e6e6e6;
  background: #1f1f1f;
  border: 1px solid #333;
  white-space: nowrap;
}

.category-count i {
  color: hsl(
    var(--bulma-primary-h),
    var(--bulma-primary-s),
    var(--bulma-primary-l)
  );
}

/* ===== ไอคอนในเมนูหลัก ===== */
#primaryNavbar .navbar-start .navbar-item > i {
  font-size: 0.85em;
  margin-right: 0.5em;
  /* ส้มอ่อน — มองเห็นชัดตั้งแต่แรกโดยไม่ต้อง hover */
  color: hsla(
    var(--bulma-primary-h),
    var(--bulma-primary-s),
    var(--bulma-primary-l),
    0.65
  );
  transition: color 0.2s ease, transform 0.2s ease;
}

#primaryNavbar .navbar-start .navbar-item:hover > i,
#primaryNavbar .navbar-start .navbar-item.is-active > i {
  /* ส้มเต็มตอนชี้/เลือกอยู่ */
  color: hsl(
    var(--bulma-primary-h),
    var(--bulma-primary-s),
    var(--bulma-primary-l)
  );
  transform: scale(1.1);
}

/** Search **/

.search-container {
  position: relative;
}

/* ===== ช่องค้นหา (ออกแบบใหม่) ===== */
#searchform .search-container .input {
  background-color: #1a1a1a !important;
  border: 1px solid #333 !important;
  border-right: none !important;
  border-radius: 999px 0 0 999px !important;
  color: #fff !important;
  height: 2.75em;
  padding-left: 1.25em;
  box-shadow: none !important;
  transition: border-color 0.2s ease, background-color 0.2s ease;
}

#searchform .search-container .input::placeholder {
  color: #777 !important;
}

#searchform .search-container .input:hover {
  border-color: #4a4a4a !important;
}

#searchform .search-container .button {
  background-color: #1a1a1a !important;
  border: 1px solid #333 !important;
  border-left: none !important;
  border-radius: 0 999px 999px 0 !important;
  color: #888 !important;
  height: 2.75em;
  padding-inline: 1.1em;
  transition: color 0.2s ease, background-color 0.2s ease;
}

/* โฟกัส: ทั้งช่อง + ปุ่ม เรืองแสงส้มพร้อมกัน */
#searchform .search-container:focus-within .input,
#searchform .search-container:focus-within .button {
  border-color: hsl(
    var(--bulma-primary-h),
    var(--bulma-primary-s),
    var(--bulma-primary-l)
  ) !important;
  background-color: #202020 !important;
}

#searchform .search-container:focus-within .button {
  color: hsl(
    var(--bulma-primary-h),
    var(--bulma-primary-s),
    var(--bulma-primary-l)
  ) !important;
}

/* ปุ่มเปลี่ยนเป็นส้มเมื่อชี้ */
#searchform .search-container .button:hover {
  background-color: hsl(
    var(--bulma-primary-h),
    var(--bulma-primary-s),
    var(--bulma-primary-l)
  ) !important;
  border-color: hsl(
    var(--bulma-primary-h),
    var(--bulma-primary-s),
    var(--bulma-primary-l)
  ) !important;
  color: #fff !important;
}

#results {
  padding: 0.5em;
  position: absolute;
  top: 100%; /* Positions the results directly below the input field */
  left: 0;
  right: 0;
  z-index: 10;
  display: none; /* Initially hidden */
  overflow: hidden;
}

#mobile-search-results {
  padding: 5px;
  position: absolute;
  top: 100%; /* Positions the results directly below the input field */
  left: 0;
  right: 0;
  z-index: 10;
  display: none; /* Initially hidden */
  overflow: hidden;
}

.result-item {
  font-size: 14px;
  color: #ffffff;
  overflow: hidden;
  text-overflow: ellipsis;
  display: block;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  transition: color 0.2s ease;
}

.result-item:hover {
  color: #ff8c42 !important;
}

.search-result-cate {
  color: #ff8c42 !important;
  transition: color 0.2s ease;
}

.search-result-cate:hover {
  color: #ff6600 !important;
}

#mobile-search-toggle {
  text-decoration: none;
}

/* Logo */
.main-logo {
  outline: none !important;
  box-shadow: none !important;
  border: none !important;
}

.main-logo:hover,
.main-logo:focus,
.main-logo:active {
  outline: none !important;
  box-shadow: none !important;
  border: none !important;
  background-color: transparent !important;
}

.main-logo img {
  max-height: 110px !important;
  height: auto !important;
  width: auto !important;
  object-fit: contain;
  outline: none !important;
  box-shadow: none !important;
  border: none !important;
}

@media screen and (max-width: 999px) {
  #burger-button {
    order: -1;
    margin-inline-end: auto;
    margin-inline-start: 0.375rem;
  }

  #mobile-search-toggle {
    margin-inline-end: 0.375rem;
    margin-inline-start: auto;
  }

  .main-logo {
    margin-inline-end: auto;
    margin-inline-start: auto;
  }

  .main-logo img {
    max-height: 60px !important;
  }
}

/* SP navbar */

#primaryNavbar .navbar-end #searchform input {
  width: 450px;
  max-width: 100%;
}

/* Tags */

.tags-container {
  position: relative;
  padding: 1rem 40px !important;
  border: none !important;
  box-shadow: none !important;
  margin: 0 auto 1rem auto !important;
  display: block;
  max-width: 1200px;
  width: 100% !important;
}

.tags-wrapper {
  overflow: hidden;
  padding: 0.5rem 0;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}

.tags-scroll {
  display: flex;
  white-space: nowrap;
  transition: transform 0.3s ease;
  padding: 0 0.25rem;
  justify-content: center;
  align-items: center;
}

.tags-scroll .button.is-dark,
.tags-scroll .button.is-small.is-dark {
  color: #ffffff !important;
  border: none !important;
  margin: 0;
  flex-shrink: 0;
  height: auto;
  padding: 0.5rem 1rem;
  border-radius: 6px;
}

.tags-scroll .button.is-dark:hover,
.tags-scroll .button.is-small.is-dark:hover {
  background: #ff8c42 !important;
  border: none !important;
  color: #000000 !important;
  transition: all 0.2s ease;
}

.tag-nav-button {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 28px;
  height: 28px;
  padding: 0;
  border-radius: 50%;
  background: #1a1a1a !important;
  border: 1px solid #333333 !important;
  color: #e0e0e0 !important;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
  transition: all 0.2s ease;
}

.tag-nav-button:hover {
  background: #ff8c42 !important;
  border-color: #ff8c42 !important;
  color: #000000 !important;
}

.tag-nav-button.prev {
  left: 8px;
}

.tag-nav-button.next {
  right: 8px;
}

.tag-nav-button.hidden {
  opacity: 0;
  pointer-events: none;
}

.tags-wrapper::-webkit-scrollbar {
  display: none;
}

.tags-wrapper {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

@media (max-width: 768px) {
  .tags-container {
    padding: 0;
    background: transparent;
  }
  .tag-nav-button {
    display: none;
  }
  .tags-wrapper {
    overflow-x: auto;
    scroll-snap-type: x mandatory;
  }
  .tags-scroll a.button {
    scroll-snap-align: start;
  }

  .hot-video-loop.is-skeleton {
    max-width: 170px;
    margin-right: 10px;
  }
}

/* Divider between video-views and video-tags */
.video-tags.tags {
  margin-bottom: 1.5rem !important;
  padding-bottom: 0 !important;
  padding-top: 1.1rem !important;
  margin-top: 0 !important;
  position: relative;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
  border-top: none !important;
}

/* Breathing room between the banner above and the meta row */
.video-meta {
  margin-top: 1rem !important;
}

/* Soft gradient divider on top of the tags block */
.video-tags.tags::before {
  content: "" !important;
  display: block !important;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 1px;
  background: linear-gradient(
    to right,
    transparent,
    hsla(
        var(--bulma-primary-h),
        var(--bulma-primary-s),
        var(--bulma-primary-l),
        0.55
      )
      25%,
    hsla(
        var(--bulma-primary-h),
        var(--bulma-primary-s),
        var(--bulma-primary-l),
        0.35
      )
      55%,
    transparent
  );
}

/* Divider for related videos section */
.columns.box.mt-5 {
  margin-top: 2rem !important;
  padding-top: 0 !important;
  position: relative;
}

.columns.box.mt-5::before {
  display: none !important;
}

.videos-related {
  margin-top: 2rem !important;
  padding-top: 0 !important;
  position: relative;
}

.videos-related::before {
  display: none !important;
}

@keyframes glow-pulse {
  0%,
  100% {
    opacity: 0.8;
    box-shadow: 0 2px 8px rgba(255, 140, 66, 0.4),
      0 0 12px rgba(255, 102, 0, 0.3);
  }
  50% {
    opacity: 1;
    box-shadow: 0 2px 12px rgba(255, 140, 66, 0.6),
      0 0 20px rgba(255, 102, 0, 0.5);
  }
}

/* Tags Top Buttons - Above tags-wrapper */
.tags-top-buttons {
  padding: 0.5rem 0;
  margin-bottom: 1rem;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
}

.tags-top-buttons-container {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  width: 100%;
  max-width: 100%;
}

.tags-top-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  padding: 1rem 2rem;
  font-size: 1rem;
  font-weight: 600;
  text-decoration: none;
  border-radius: 8px;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
  border: 2px solid transparent;
  min-width: 200px;
}

.tags-top-btn i {
  font-size: 1.25rem;
  transition: transform 0.3s ease;
}

.tags-top-btn span {
  position: relative;
  z-index: 1;
}

/* New Videos Button - Teal/Dark Teal Gradient */
.tags-top-btn-new {
  background: linear-gradient(135deg, #008b8b 0%, #006666 100%);
  color: #ffffff;
  box-shadow: 0 4px 15px rgba(0, 139, 139, 0.3);
}

.tags-top-btn-new i {
  color: #ffd700;
  filter: drop-shadow(0 0 3px rgba(255, 215, 0, 0.6));
}

.tags-top-btn-new:hover {
  background: linear-gradient(135deg, #006666 0%, #008b8b 100%);
  color: #ffffff;
  box-shadow: 0 6px 20px rgba(0, 139, 139, 0.5);
  transform: translateY(-2px);
}

.tags-top-btn-new:hover i {
  transform: rotate(15deg) scale(1.1);
}

/* Popular Videos Button - Maroon/Red Gradient */
.tags-top-btn-popular {
  background: linear-gradient(135deg, #8b0000 0%, #a52a2a 100%);
  color: #ffffff;
  box-shadow: 0 4px 15px rgba(139, 0, 0, 0.3);
}

.tags-top-btn-popular i {
  color: #ff6347;
  filter: drop-shadow(0 0 3px rgba(255, 99, 71, 0.6));
}

.tags-top-btn-popular:hover {
  background: linear-gradient(135deg, #a52a2a 0%, #8b0000 100%);
  color: #ffffff;
  box-shadow: 0 6px 20px rgba(139, 0, 0, 0.5);
  transform: translateY(-2px);
}

.tags-top-btn-popular:hover i {
  transform: scale(1.2);
  animation: fire-flicker 0.5s ease-in-out;
}

@keyframes fire-flicker {
  0%,
  100% {
    transform: scale(1.2);
  }
  50% {
    transform: scale(1.3) rotate(5deg);
  }
}

/* Responsive */
@media (max-width: 768px) {
  .footer-btn {
    min-width: 160px;
    padding: 0.875rem 1.5rem;
    font-size: 0.9rem;
  }

  .footer-action-buttons .buttons {
    flex-direction: column;
    align-items: center;
  }

  .footer-btn {
    width: 100%;
    max-width: 280px;
  }
}