/* =========================================================================
   [1] BASE THEME IMPORT: demo-three.css
       - Styles from the core theme are imported and take precedence unless overridden.
   ========================================================================= */
/* NOTE: Adjust the path below to correctly point to your demo-three.min.css file */
@import url("demo-three.min.css");


/* =========================================================================
   [2] CUSTOM STYLES / OVERRIDES FROM style.css
       - These styles are placed last to override any conflicting rules in demo-three.css.
   ========================================================================= */

/* Custom Variables */
:root {
  --accent-color: #6b61a0; 
  --text-color: #6b61a0;
}

.language-switcher {
  position: relative;
  display: inline-block;
  z-index: 50;
}

.selector-btn {
  display: flex;
  align-items: center;
  color: white;
  padding: 8px 12px;
  cursor: pointer;
  border-radius: 4px;
  transition: background-color 0.2s;
  border: 1px solid white;
}

.selector-btn:hover {
  background-color: rgba(255, 255, 255, 0.2);
}

.dropdown {
  position: absolute;
  top: 100%;
  right: 0;
  background-color: white;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  border-radius: 8px;
  overflow: hidden;
  margin-top: 5px;
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.2s, visibility 0.2s;
  min-width: 150px;
  z-index: 60;
}

.dropdown.show {
  visibility: visible;
  opacity: 1;
}

.dropdown .option {
  color: #6b61a0;
  padding: 10px 15px;
  display: flex;
  align-items: center;
  white-space: nowrap;
  cursor: pointer;
  font-size: 14px;
}

.dropdown .option:hover {
  background-color: #f0f0f0;
  font-weight: bold;
}

.dropdown .option img {
  height: 18px;
  width: 24px;
  margin-right: 10px;
}

.language-selector {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 40px;
  padding: 10px 0;
  gap: 15px;
}

.lang-option {
  display: flex;
  align-items: center;
  cursor: pointer;
  padding: 5px 10px;
  border-radius: 5px;
  transition: background-color 0.2s;
}

.lang-option:hover {
  background-color: #f0f0f0;
}

.lang-option img {
  height: 24px;
  width: 32px;
  margin-right: 8px;
}

.lang-text {
  color: var(--text-color);
  font-size: 16px;
  font-weight: 500;
}

.separator {
  width: 1px;
  height: 20px;
  background-color: #6b61a0;
  opacity: 0.5;
}

/* Custom button style */
.custom-button {
  background-color: #6b61a0;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.custom-button:hover {
  background-color: #554a93;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(255, 107, 107, 0.4);
}

.custom-button:active {
  transform: translateY(0);
}

.custom-button::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.2),
    transparent
  );
  transition: 0.5s;
}

.custom-button:hover::after {
  left: 100%;
}

/* Slider Animation */
.slide {
  opacity: 0;
  transition: opacity 0.2s ease-out;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: none;
}

.slide.active {
  opacity: 1;
  display: block;
  z-index: 10;
}

.slide-in-right {
  animation: slideInRight 0.5s forwards;
}

.slide-out-left {
  animation: slideOutLeft 0.5s forwards;
}

.slide-in-left {
  animation: slideInLeft 0.5s forwards;
}

.slide-out-right {
  animation: slideOutRight 0.5s forwards;
}

@keyframes slideInRight {
  from {
    transform: translateX(100%);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

@keyframes slideInLeft {
  from {
    transform: translateX(-100%);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

@keyframes slideOutRight {
  from {
    transform: translateX(0);
    opacity: 1;
  }
  to {
    transform: translateX(100%);
    opacity: 0;
  }
}

@keyframes slideOutLeft {
  from {
    transform: translateX(0);
    opacity: 1;
  }
  to {
    transform: translateX(-100%);
    opacity: 0;
  }
}

.bullet {
  position: relative;
  transition: all 0.3s ease;
}

.bullet.animate-pulse::after {
  animation: bulletPulse 0.5s ease-out;
}

@keyframes bulletPulse {
  0% {
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(250, 204, 21, 0.7);
    opacity: 1;
  }
  70% {
    transform: scale(1.5);
    box-shadow: 0 0 0 10px rgba(250, 204, 21, 0);
    opacity: 0.7;
  }
  100% {
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(250, 204, 21, 0);
    opacity: 0;
  }
}

/* Carousel Nav and Scrollbar Hide */
.hide-scrollbar::-webkit-scrollbar {
  display: none;
}

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

.nav-button {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  z-index: 10;
  cursor: pointer;
  color: #6b61a0;
}

.nav-button.prev {
  left: 10px;
}

.nav-button.next {
  right: 10px;
}

/* Card Hover Effect */
.card {
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
}

.card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 15px rgba(0, 0, 0, 0.1);
}
.gradient-button {
  /* พื้นฐานของปุ่ม */
  background: linear-gradient(to right, #FF9966, #FF6633); /* สีส้มไล่เฉด */
  color: white; /* สีข้อความ */
  border: none; /* ไม่มีขอบ */
  border-radius: 40px; /* มุมโค้งมน */
  padding: 16px 32px; /* หรือตามที่คุณต้องการ */
  font-size: 20px;
  font-weight: 600;
  cursor: pointer;
  position: relative; /* สำคัญสำหรับ Pseudo-element */
  overflow: hidden; /* ซ่อนแสงที่อยู่ภายนอก */
  transition: all 0.3s ease; /* Transition สำหรับการเปลี่ยนอื่นๆ เช่น shadow */
}

.gradient-button::before {
  /* สร้าง "แสง" ด้วย Pseudo-element */
  content: '';
  position: absolute;
  top: 0;
  left: -100%; /* เริ่มต้นจากด้านซ้ายนอกปุ่ม */
  width: 100%;
  height: 100%;
  background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.4) 50%, rgba(255, 255, 255, 0) 100%); /* แสงขาวโปร่งใส */
  transition: left 0.7s ease; /* Transition ให้แสงเคลื่อนที่ช้าๆ */
}

.gradient-button:hover::before {
  /* เมื่อ Hover ให้แสงเคลื่อนที่ไปทางขวา */
  left: 100%;
}

/* หากต้องการ Shadow/Lift effect เมื่อ hover */
.gradient-button:hover {
  box-shadow: 0 10px 15px rgba(0, 0, 0, 0.1); /* Shadow effect */
  transform: translateY(-5px); /* ยกปุ่มขึ้นเล็กน้อย */
}
/* 1. กำหนดคลาสสำหรับเอฟเฟกต์เติมขอบ */
.border-fill-effect {
    position: relative;
    overflow: hidden;
    z-index: 1;
    transition: all 0.3s ease; 
    /* NEW: กำหนดพื้นหลังเป็น Transparent เพื่อให้เห็น bg-white จาก HTML */
    background-color: white !important; 
    /* หรือใช้ background-color: white !important; หากไม่มั่นใจใน bg-white ของ HTML */
}

/* 2. สร้าง Pseudo-element เพื่อเป็นสีเติม (เมื่อ Hover) */
.border-fill-effect::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 0; /* เริ่มต้นความกว้างเป็น 0 */
    height: 100%;
    background-color: #FB9869; 
    z-index: -1; 
    transition: width 0.3s ease-out; 
}

/* 3. Hover State: เติมสีจากซ้ายไปขวา */
.border-fill-effect:hover::before {
    width: 100%; /* เมื่อ Hover ให้ความกว้างเป็น 100% */
}

/* 4. Hover State: ปรับสีข้อความให้เป็นสีขาวเมื่อ Hover */
.border-fill-effect:hover h1, 
.border-fill-effect:hover p {
    color: white !important; 
}

/* 5. สถานะปกติ: ตรวจสอบว่าสีข้อความกลับมาเป็นสีเดิมเมื่อไม่ Hover */
.border-fill-effect h1,
.border-fill-effect p {
    transition: color 0.3s ease; /* ทำให้การเปลี่ยนสีข้อความราบรื่น */
}
/* 1. จัดวางเลย์เอาต์หลักเป็น 2 คอลัมน์ (สำหรับ Desktop) */
#columns {
    display: flex;
    max-width: 1400px; /* กำหนดความกว้างสูงสุดของเนื้อหา */
    margin: 0 auto;
    gap: 24px; /* ช่องว่างระหว่างคอลัมน์ */
}

/* 2. จัดการส่วนหลัก (#primary) และส่วนรอง (#secondary) */
#primary {
    /* ให้ส่วนหลักขยายเต็มที่ตามพื้นที่ที่เหลือ */
    flex: 1; 
    min-width: 0; /* สำคัญสำหรับ flex item */
}

#secondary {
    /* ส่วนรอง (วิดีโอที่เกี่ยวข้อง) มีความกว้างคงที่ */
    width: 400px; 
    flex-shrink: 0; /* ป้องกันไม่ให้ส่วนนี้ถูกบีบ */
}

/* 3. สไตล์ของส่วนต่างๆ */
#player {
    background-color: #000;
    color: white;
    aspect-ratio: 16 / 9; /* กำหนดอัตราส่วน 16:9 สำหรับวิดีโอ */
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 24px;
    border-radius: 8px;
}

#below {
    /* เนื้อหาด้านล่างวิดีโอ */
    padding: 0;
}

#metadata {
    /* ข้อมูลวิดีโอ ชื่อเรื่อง ฯลฯ */
    padding-bottom: 20px;
    border-bottom: 1px solid #ddd;
    margin-bottom: 20px;
}

#comments {
    /* ส่วนความคิดเห็น */
    padding-top: 10px;
}

#related {
    /* รายการวิดีโอที่เกี่ยวข้อง */
    padding: 10px;
    border: 1px solid #eee;
    background-color: #fff;
    border-radius: 8px;
}

#related ul {
    list-style: none;
    padding: 0;
}

#related li {
    padding: 8px 0;
    border-bottom: 1px dotted #eee;
}

/* 4. การปรับสำหรับหน้าจอขนาดเล็ก (Responsive Design) */
@media (max-width: 1000px) {
    #columns {
        /* เมื่อหน้าจอแคบลง ให้เปลี่ยนเป็นแถวเดียว (เรียงลงมา) */
        flex-direction: column;
        padding: 0 10px;
        gap: 0;
    }
    
    #secondary {
        /* ส่วนรอง (Related) จะใช้ความกว้างเต็มที่ของหน้าจอ */
        width: 100%;
        order: 1; /* อาจย้ายไปอยู่ด้านล่างสุด */
        margin-top: 24px;
    }

    #primary {
        order: 0;
    }

    #player {
        /* ทำให้วิดีโอใช้ความกว้างเต็มที่ของคอนเทนเนอร์หลัก */
        width: 100%; 
    }
}

/* สไตล์เพิ่มเติมเพื่อให้ดูคล้าย YouTube มากขึ้น */
#metadata h2 {
    font-size: 20px;
    margin-bottom: 8px;
}

#actions {
    margin-top: 10px;
    color: #606060;
}
/* Custom CSS ที่ต้องมีใน custom-theme.css */

/* Custom CSS ที่ต้องมีใน custom-theme.css */

/* 1. Keyframe Animation (วิ่งครั้งเดียว) */
@keyframes sweep-shimmer-once {
  0% { transform: translateX(0) skewX(-20deg); } 
  100% { transform: translateX(400%) skewX(-20deg); } 
}

/* 2. Custom CSS สำหรับปุ่ม: ใช้ชื่อคลาส .shimmer-button */
.shimmer-button {
  position: relative;
  overflow: hidden; 
  transform: translateZ(0); 
  transition: all 0.3s ease;
  
}

.shimmer-button::before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%; 
  width: 50%; 
  height: 100%;
  
  /* สร้าง Gradient เพื่อให้แสงจางลงด้านซ้าย/ขวา */
  background: linear-gradient(
    to right, 
    rgba(255, 255, 255, 0) 0%,     /* ซ้ายสุด: โปร่งใส (0) */
    rgba(255, 255, 255, 0.6) 50%,   /* กลาง: มีแสง (0.6) */
    rgba(255, 255, 255, 0) 100%    /* ขวาสุด: โปร่งใส (0) */
  );
  
  transform: skewX(-20deg);
  animation: none; 
}

/* 3. การกระตุ้น Animation เมื่อ Hover (วิ่งแค่ครั้งเดียว) */
.shimmer-button:hover::before {
  animation: sweep-shimmer-once 1.0s forwards; 
}
/* Custom Button/Card Animation Styles */

/* 1. Base style for the card link */
.custom-button {
    /* กำหนดพื้นหลังเริ่มต้น (สามารถปรับเป็นสีที่คุณต้องการได้) */
    background: #ffffff; /* ใช้สีขาวหรือสีเริ่มต้นอื่น ๆ */
    position: relative;
    overflow: hidden; /* สำคัญสำหรับเอฟเฟกต์แสงวิ่งผ่าน */
    transition: all 0.3s ease; /* ทำให้การเปลี่ยนสถานะ (ยกตัว/เงา) นุ่มนวล */
    display: block; /* ทำให้ A-tag เป็น Block element เพื่อให้ครอบคลุม Div ภายใน */
    text-decoration: none; /* ลบขีดเส้นใต้ของลิงก์ */
}

/* 2. Hover Effect: ยกตัวขึ้น (TranslateY) และเพิ่มเงา */
.custom-button:hover {
    transform: translateY(-5px); /* ยกตัวขึ้น 5px */
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2); /* เพิ่มเงาเมื่อ Hover */
}

.custom-button:active {
    transform: translateY(-2px); /* กลับลงมาเล็กน้อยเมื่อคลิก */
}

/* 3. Shine Effect (แสงวิ่งผ่าน) */
/* สร้าง Pseudo-element เพื่อใช้เป็นแถบแสง */
.custom-button::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%; /* <<<< ปรับค่าตรงนี้ให้เป็น 50% หรือค่าอื่นที่ต้องการ */
    height: 100%;
    /* Gradient สีขาวจาง ๆ เพื่อจำลองแสง */
    background: linear-gradient(
        90deg,
        transparent,
        rgba(255, 255, 255, 0.4),
        transparent
    );
    transition: all 0.5s ease;
}

/* 4. Animation for Shine Effect on Hover */
.custom-button:hover::after {
    left: 150%; /* ปรับค่า left: 130% เป็น 150% เพื่อให้แสงวิ่งจนสุดขอบ (เพราะแสงกว้างขึ้น) */
    transition: all 0.9s ease;
}
/* Final overrides for specific elements not fully covered by utility classes if needed */