body {
      color: #fff;
      font-family: "Kanit";
    height: 100%;
  width: 100%
    }
p,th,td,a,li {
      font-family: "Kanit";
    font-weight: 400;
    margin-bottom: 0;
        line-height: 1.2;
}
i {
    font-size: 12px;
        line-height: 1;
}
h1,h2,h3,h4,h5,h6 {
      font-family: "Kanit";
}
.hero {
  position: relative;
  width: 100%;
  height: 100vh; /* 或 100vh */
  overflow: auto;
    
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 视频元素：填满容器并居中裁切 */
.hero-video {
  position: absolute;
  top: 50%;
  left: 50%;
  min-width: 100%;
  min-height: 100%;
  width: 100%;
  height: 100%;
  transform: translate(-50%, -50%);
  z-index: 0;
  object-fit: fill; /* 保持覆盖效果 */
}

/* 黑色半透明遮罩（0.7）*/
.hero-overlay {
  position: absolute;
  inset: 0; /* top:0; right:0; bottom:0; left:0; */
  background-color: rgba(0, 0, 0, 0.8);
  z-index: 1;
}

/* 中央内容（图片） */
.hero-content {
  position: relative;
  z-index: 2; /* 在遮罩之上 */
  max-height: 100vh;
  max-width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none; /* 如果不想图片影响点击，可保留；若要可点则删除 */
}

/* 图片样式：响应式且不超出容器 */
.hero-content img {
  max-width: 90%;
  width: auto;
  height: auto;
  display: block;
  pointer-events: auto; /* 若需要点击，保持 auto */
  border-radius: 8px; /* 可选 */
}
/*Logo animation ////////////////////////////////////////////////////////////////////////////////////////*/
#slider-container {
    background: #1a1a1a;
		height: 16vh;
		width: 100%;
		margin: 0 auto;
		position: relative;
		overflow: hidden;
	}
	.slider {
		position: absolute;
		display: flex;
		flex-flow: row nowrap;
	}
	.slider-instant {
		transition: none;
	}
	.slider-animate {
		margin-left: 0;
	}
	.slider-extra {
		display: flex;
		flex-flow: row nowrap;
	}
	.slider-last {
		min-width: 100vw;
		max-width: 100vw;
		overflow: hidden;
	}
	.slider span {
		margin-right: 30px;
	}
	.slider .slider-extra {
		margin-right: 0;
	}
	.slider img {
        filter: grayscale(100%) brightness(60%);
        transition: filter 0.3s ease;
		height: inherit;
		vertical-align: inherit;
		border: inherit;
		width: auto;
		height: auto;
		max-width: 150px; 
	    max-height: 150px;
	}
.slider img:hover {
  filter: none !important;
}
#slider-container::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  height: 100%;
  width: 330px; /* 控制中间3个位置的宽度 */
  pointer-events: none;
  z-index: 5;
  box-shadow: 0 0 0 9999px rgba(0,0,0,0.6); /* 只让中间区域特殊处理 */
  mix-blend-mode: lighten; 
}

#slider-container img {
  filter: grayscale(100%) brightness(0.5); /* 默认灰色 */
  transition: filter 0.3s ease;
}

#slider-container img:hover {
  filter: none; /* hover 显示原色 */
}

#slider-container .active img {
  filter: brightness(0) invert(1); /* 白色 */
}

/*section 2 ////////////////////////////////////////////////////////////////////////////////////////*/

.clg_2 {
    background: url(../img/bg.jpg)top center;
    position: relative;
    width: 100%;
    min-height: 100vh;
    height: auto;
    padding-bottom: 2%;
    background-size: cover;
}
/*prize details ////////////////////////////////////////////////////////////////////////////////////////*/
.prize_detail {
    padding-top: 4%;
}
.prize-section {
    background: url(../img/prize_detail.png)top center;
    position: relative;
    width: 100%;
    padding: 20px 15px;
    background-size: 100% 100%;
}
#prizeCarousel .carousel-item {
    padding: 6% 8%;
    padding-top: 1%;
}
 .prize-section .table thead th {
      text-align: center;
     width: 50%;
     color: #FF6C89;
     vertical-align: middle;
     align-content: center;
    }
    .prize-section .table tbody td {
      text-align: center;
      border: none;
     width: 50%;;
    align-content: center;
     color: #ffffff;
     vertical-align: middle;
    }
.prize-section .table tbody td:nth-child(2) {
    font-weight: bold;
    
}
.note {
        line-height: 1;
    }
.carousel-control-prev {
    left: -10%;
}
.carousel-control-next {
    right: -10%;
}
.carousel-control-next img,.carousel-control-prev img{
    width: 15%;
}
#prizeCarousel .carousel-item h5 {
    color: #FF0004;
    font-size: 26px;
    text-transform: uppercase;
    font-weight: bold;
    margin-bottom: 3%;
}
h4 {
    color: #ffffff;
    font-size: 30px;
    font-weight: bold;
    letter-spacing: 1px;
    text-transform: uppercase;
    
}

.prize_detail .carousel-indicators li {
  width: 10px;
  height: 10px;
  border-radius: 50%;  /* 变成圆点 */
  background-color: #ffffff; /* 默认灰色 */
    margin: 0 1%;
    opacity: 1 !important;   
}

.prize_detail .carousel-indicators .active {
  background-color: #FB5B5B; /* 当前活动的圆点颜色 */
}

/* 让 tbody 内部内容可以 flex 居中 */
.prize-section tbody {
  display: flex;
  flex-direction: column;
  justify-content: flex-start; /* 默认和原来一样 */
}

.prize-section3 tbody {
  justify-content: center; /* 第三个的内容居中 */
}
.prize-section3 table {
  width: 100%;
}
.prize-section tr {
  display: flex;
  justify-content: center;
}
.prize-section3 td {
  text-align: center;
  flex: 1;
}
/*tnc txt ////////////////////////////////////////////////////////////////////////////////////////*/
.tnc_detail {
    padding: 2% 0;
}
.tnc_txt a{
    color: #ffffff!important;
    text-decoration: underline;
    font-weight: 600;
    font-size: 18px;
    
}
.card1 {
    margin-bottom: 2%;
    background: #191818;
}

.card1 .tnc_title{
    background: #1C1C1C;
    padding: 1%;
    border: 1px solid #FF0C10;
    padding: 1.5% 2%;
}
.card1 .tnc_title2 {
    padding-left: 2.5%;
}


.card1 .card-body {
    background: none;
    border: 1px solid #FF0C10;
    border-top: none;
    color: #fff;
    font-size: 16px; 
    font-weight: normal;
    justify-content: space-between;
    padding-left: 0;
}
.card .arrow {
  transform: rotate(0deg);
    float: right;
        position: absolute;
    right: 2%;
}
#tnc p, #tnc li, #tnc i{
    font-size: 14px;
}
#tnc p b {
    font-size: 15px;
}
/* Rotate the arrow icon when the dropdown button is clicked */
.card1[aria-expanded="true"] .arrow{
  transform: rotate(90deg);
    filter: brightness(0) invert(1);
    
}
.card1[aria-expanded="true"] .tnc_title{
    color: white;
    background: #710506;
background: linear-gradient(90deg, rgba(113, 5, 6, 1) 0%, rgba(255, 12, 16, 1) 100%);
    border: none;
}
#tnc h3 {
    text-transform: uppercase;
    font-size: 22px;
}
/*session winner 3 slide ///////////////////////////////////////////////////////////////////////*/
#date_weekly {
    background: url(../img/date_bg.png)top center;
    position: relative;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    padding: 4% 8%;
    margin-top: 4%;
    font-size: 20px;
    font-family: "Kanit";
    letter-spacing: 1px;
}

.tabSection {
    padding-top: 2%;
}
.nav-pills {
    margin-bottom: 3%;
}
.session_winner {
    padding: 0;
    padding-top: 5%;
}
.session_winner .category-link{
    align-content: center;
    background: url(../img/session_title_bg.png)top center;
    position: relative;
    width: 100%;
    padding: 20px 15px;
    background-size: 100% 100%;
    width: 32.6%;
    cursor: pointer;
}
.session_winner .category-link:nth-child(2){
    margin: 0 1%;
}
.session_winner .category-link.active{
    background: url(../img/session_title_bg_active.png)top center;
    position: relative;
    padding: 20px 15px;
    background-size: 100% 100%;
    
}
.session_winner .category-link p{
    text-transform: uppercase;
    font-weight: 400;
    font-size: 18px;
    color: #ffffff;
}
.session_winner .category-link a:hover{
    text-decoration: none!important;
}
.third_search_form{
    justify-content: center;
    margin-top: 0;
    margin-bottom: 0;
    padding-top: 1%;
    padding-bottom: 2%;
    
}
.id-search, .id-search2, .id-search3, .id-search4{
    width: 100%;
}

.id-search, .id-search2, .id-search3, .id-search4{
    background: transparent!important;
    border: transparent!important;
    color: #000000!important;
    font-size: 20px;
}
.id-search:focus, .id-search2:focus, .id-search3:focus, .id-search4:focus{
    box-shadow:none;
}
.id-search::placeholder, .id-search2::placeholder, .id-search3::placeholder, .id-search4::placeholder  {
    color: #777171;
}
.idsearch2 {
    min-width: max-content;
    font-size: 20px;
    border-radius: 5px;
    background: #FF0004;
background: linear-gradient(180deg, rgba(255, 0, 4, 1) 0%, rgba(153, 0, 3, 1) 100%);
    padding: 0 5%;
    color: #ffffff;
    font-weight: bold;
}
.session_winner .form-outline, .current_weekly .form-outline{
    width: 100%;
    border-radius: 15px;
    display: inline-flex!important;
}
.session_winner .form-outline input, .current_weekly .form-outline input{
    background: #E0D9D9!important;
    padding: 4%;
    border-radius: 5px;
}
.session_winner .form-outline, .current_weekly .form-outline {
    width: 100%;
    display: inline-flex!important;
}
.table_padding {
    padding: 2%;
    padding-top: 1%;
}
.prize_lucky_draw {
    margin-top: 0;
    border-radius: 25px;
    padding: 0;
}
.table2_border {
    background: #FFFFFF;
    background: linear-gradient(180deg, rgba(255, 255, 255, 1) 25%, rgba(0, 0, 0, 1) 25%);
    border: 2px solid #FFFFFF;
    border-top: none;
    border-radius: 10px;
    margin-top: 2%;
    place-content: center;
}
.table-responsive {
        border: none;
        max-height: 550px;
    overflow: auto;
    padding-bottom: 1%;
    border-top-right-radius: 0;
    border-top-left-radius: 0;
    border-radius: 10px;
    }
.prize_lucky_draw .table-responsive::-webkit-scrollbar {
  width: 10px;
}

/* Track */
.prize_lucky_draw.table-responsive::-webkit-scrollbar-track{
  box-shadow: inset 0 0 5px #2d2d2d; 
  border-radius: 10px;
    background: #2d2d2d;
}
 
/* Handle */
.prize_lucky_draw .table-responsive::-webkit-scrollbar-thumb{
  background: #D9D9D9; 
  border-radius: 10px;
}

/* Handle on hover */
.prize_lucky_draw .table-responsive::-webkit-scrollbar-thumb:hover{
  background: #000000; 
}

.table2_padding thead tr th {
    color: #000000;
    border-bottom: none;
    text-align: center;
    width: 14%;
    font-weight: 400;
    font-size: 18px;
    vertical-align: middle;
}
.table2_padding thead tr th:first-child {
    border-radius: 10px;
    border-top-right-radius: 0px;
    border-bottom-right-radius: 0px;
}
.table2_padding thead tr th:last-child {
    border-radius: 10px;
    border-top-left-radius: 0px;
    border-bottom-left-radius: 0px;
    width: 25%;
}

.table2_padding tbody tr td:first-child {
    border-radius: 10px;
    border-top-right-radius: 0px;
    border-bottom-right-radius: 0px;
}
.table2_padding tbody tr td:last-child {
    border-radius: 10px;
    border-top-left-radius: 0px;
    border-bottom-left-radius: 0px;
    width: 25%;
}
.table2_padding .table-responsive .table {
    
    background: rgb(0,0,0)!important;
    border-radius: 15px;
}
.table2_padding tbody tr {
    background: #252525;
}
.table2_padding tbody tr:nth-child(1),.table2_padding tbody tr:nth-child(2),.table2_padding tbody tr:nth-child(3) {
    background: #710506;
background: linear-gradient(90deg, rgba(113, 5, 6, 1) 0%, rgba(255, 12, 16, 1) 100%);
    font-weight: 400;
}
.table2_padding tbody tr td {
    position: relative;
    color: #ffffff;
    border-top: none;
    text-align: center;
    width: 14%;
    font-weight: 400;
    font-size: 16px;
    vertical-align: middle;
}
.table2_padding tbody tr td:nth-child(3) {
    text-align: left;
    padding-top: 0;
    padding-bottom: 0;
    padding-left: 4%;
}
.table2_padding tbody tr td:nth-child(4) img {
    width: 25%;
}
#product3 .table2_padding tbody tr td:nth-child(4) img {
    width: 20%;
}
.small_font_txt {
    margin-top: 2%;
}
/*session current weekly leaderboard ///////////////////////////////////////////////////////////////*/
.current_weekly{
    margin-top: 7%;
}

/*modal ///////////////////////////////////////////////////////////////////////*/
.modal-header {
    border-bottom: none;
}
.modal .modal-content{
    background: url(../img/modal_bg.png)top center;
    position: relative;
    width: 100%;
    padding: 8%;
    background-size: 100% 100%;
        border: none;
    background-color: transparent;
    
}
.modal-content h3 {
    text-align: center;
}
/*seacrh pop up result ///////////////////////////////////////////////////////////////////////*/
.usersearch-home table tr td{
    border-top: none;
    color: #ffffff;
    width: 50%;
    vertical-align: middle;
}
.modal-body table tr td img {
    width: 12%;
}
/* 可选：在小屏幕隐藏 video，改用 poster background 避免流量和自动播放失败 */
@media (max-width: 768px) {
    .clg_2 {
        background: url(../img/bg.jpg) top center;
        position: relative;
        width: 100%;
        min-height: 100vh;
        height: auto;
        padding-bottom: 2%;
        background-size: contain;
        background-color: black;
        background-repeat: no-repeat;
    }
     i {
        font-size: 9px;
    }
  .hero-video {
  transform: translate(-50%, -50%);
  z-index: 0;
  object-fit: fill; /* 保持覆盖效果 */  }
  .hero {
      position: relative;
      width: 100%;
      height: 25vh; /* 或 100vh */
      overflow: auto;

      display: flex;
      align-items: center;
      justify-content: center;
    }
    
/*Logo animation ////////////////////////////////////////////////////////////////////////////////////////*/
    .slider img {
		max-width: 60px; 
	    max-height: 60px;
	}
    
    #slider-container {
        height: 6vh;
    }
    .slider .pr-5 {
        padding-right: 2%!important;
}
    
/*prize details ////////////////////////////////////////////////////////////////////////////////////////*/
    .prize-section .table thead th{
        font-size: 13px;
    }
    .prize-section .table tbody td{
        font-size: 12px;
    }
    .prize_detail {
        overflow: hidden;
        padding-top: 10%;
    }
    h4 {
        font-size: 18px;
        margin-bottom: 4%;
    }
    
    #prizeCarousel .carousel-item h5{
        font-size: 16px;
        width: 70%;
        place-self:center;
    }
    .prize-section {
        background: url(../img/prize_detail_mb.png)top center;
        position: relative;
        width: 100%;
        padding: 20px 15px;
        background-size: 100% 100%;
    }
  
    #prizeCarousel .carousel-item {
        padding: 6% 4%;
        padding-top: 1%;
    }
    .carousel-indicators {
        bottom: -5%!important;
    }
    .note {
        padding-top: 2%;
    }
    .carousel-control-next img, .carousel-control-prev img {
        width: 30%;
    }
    .carousel-control-next {
        right: -8%;
    }
    .carousel-control-prev {
        left: -8%;
    }
/*tnc txt///////////////////////////////////////////////////////////////////////*/
    #tnc p, #tnc li , #tnc i{
        font-size: 11px;
    }
    #tnc p b {
        font-size: 12px;
    }
    .tnc_txt a{
        font-size: 14px;
    }
    #tnc h3 {
        font-size: 16px;
    }
    .card1 .tnc_title{
        padding: 2.5% 3%;
    }
    .card1 .tnc_title2 {
        padding-left: 7.5%;
    }
    .card .arrow { 
    top: 5px;}

/*session winner 3 slide ///////////////////////////////////////////////////////////////////////*/
    .table2_padding tbody tr td:nth-child(3) {
        padding-left: 5%;
    }
    .tabSection {
        padding-top: 3%;
    }
    .session_winner {
        padding: 0 7%;
        padding-top: 15%;
    }
    .tabSection {
        padding-top: 0;
    }
   .session_winner .category-link {
        width: 100%;
    }
    .session_winner .category-link p {
        font-size: 14px;
    }
    .session_winner .category-link:nth-child(2){
        margin: 4% 0;
    }
    .id-search, .id-search2, .id-search3, .id-search4 {
        background: transparent !important;
        border: transparent !important;
        color: #000000 !important;
        font-size: 14px;
    }
   
    .third_search_form {
        padding-bottom: 4%;
    }
    .table2_padding::-webkit-scrollbar {
      height: 5px;     
        width: 10px;
    }

    /* Track */
    .table2_padding::-webkit-scrollbar-track {
      box-shadow: inset 0 0 5px #2d2d2d; 
      border-radius: 10px;
        background: #2d2d2d;
    }

    /* Handle */
    .table2_padding::-webkit-scrollbar-thumb {
      background: rgb(239, 239, 239,0.6); /* 滚动条颜色 */
      border-radius: 10px;
    }

    /* Handle on hover */
    .table2_padding::-webkit-scrollbar-thumb:hover {
      background: #000000; 
    }
    #date_weekly {
        font-size: 14px;
    }
    .table2_border {
        background: #FFFFFF;
        background: linear-gradient(180deg, rgba(255, 255, 255, 1) 10%, rgba(0, 0, 0, 1) 10%);
        padding: 0 2%;
        padding-bottom: 4%;
    }
    .table4_border {
        border-top: 2px solid white;
        background: #000000;
background: linear-gradient(180deg, rgba(0, 0, 0, 1) 9%, rgba(255, 255, 255, 1) 9%, rgba(255, 255, 255, 1) 18%, rgba(0, 0, 0, 1) 18%);
    }
    .table2_padding {
        width: 100%;
        padding-bottom: 2%;
        overflow-x: auto;
    }
    .table-container {
        width: 200%;
    }
    .table_padding {
        padding: 0;
        padding-top: 1%;
    }
    .table2_padding thead tr th {
        font-size: 13px;
    }
    .table2_padding tbody tr td {
        
        font-size: 12px;
    }
    .small_font_txt {
        margin-top: 3%;
        font-size: 10px;
        margin-bottom: 5%;
    }
    .current_weekly {
        padding: 0 10.5%;
        margin-top: 15%;
    }
    .table2_padding tbody tr td:nth-child(4) img {
        width: 40%;
    }
    .session_winner .form-outline, .current_weekly .form-outline{
        width: 100%;
        border-radius: 15px;
        display: inline-flex!important;
    }
    .session_winner .form-outline input, .current_weekly .form-outline input{
        background: transparent!important;
        padding: 4%;
        border-radius: 5px;
    }
    .session_winner .form-outline, .current_weekly .form-outline {
        width: 100%;
        display: inline-flex!important;
    }
    .session_winner .border_search, .current_weekly .border_search  {
        background: #E0D9D9!important;
    }
    .idsearch2 img{
        width: 80%;
    }
         .idsearch2 {
        font-size: 14px;
        border-radius: 5px;
        background: transparent;
        padding: 0;
         padding-right: 4%;
        color: #ffffff;
        font-weight: bold;
    }
/*modal ///////////////////////////////////////////////////////////////////////*/    
    .modal-body table tr td img {
        width: 30%;
    }
}