/*
Theme Name: Flatsome Child
Description: This is a child theme for Flatsome Theme
Author: UX Themes
Template: flatsome
Version: 3.0
*/

/*************** ADD CUSTOM CSS HERE.   ***************/




#main, #wrapper,#main.dark{
	background: inherit;
}
.header-bg-color{
	background-color: inherit !important;
}

h1.section-title-normal{
	padding-right: 0;
	width: 100%;
	display: block;
	border: none;
	text-align: center;
}
h1.section-title-normal span{
	border-bottom: 3px solid;
	border-image-source: linear-gradient(to right, #00FFD0, #FFD700);
	border-image-slice: 1;
	margin-right: 0;
	padding-bottom: 20px;
}

.header-button-1::after {
	content: "";
	position: absolute;
	top: -10px;
	left: -10px;
	right: -10px;
	bottom: -10px;
	border: 2px solid #d75c08;
	transition: all 0.5s;
	animation: clippath 3s infinite -1.5s linear;
	border-radius: 7px;
}
.header-button-1::before {
    content: "";
    position: absolute;
    top: -10px;
    left: -10px;
    right: -10px;
    bottom: -10px;
    border: 2px solid #1ceb00;
    transition: all 0.5s;
    animation: clippath 3s infinite 
linear;
    border-radius: 7px;
}

.header-button-2::before {
	content: "";
	position: absolute;
	top: -10px;
	left: -10px;
	right: -10px;
	bottom: -10px;
	border: 2px solid #1ceb00;
	transition: all 0.5s;
	animation: clippath 3s infinite linear;
	border-radius: 7px;
}

.header-button-2::after {
	content: "";
	position: absolute;
	top: -10px;
	left: -10px;
	right: -10px;
	bottom: -10px;
	border: 2px solid #d75c08;
	transition: all 0.5s;
	animation: clippath 3s infinite -1.5s linear;
	border-radius: 7px;
}
@keyframes clippath {
	0%,100% {
		clip-path: inset(0 0 98% 0);
	}

	25% {
		clip-path: inset(0 98% 0 0);
	}

	50% {
		clip-path: inset(98% 0 0 0);
	}

	75% {
		clip-path: inset(0 0 0 98%);
	}
}



.zom-in-out{
	animation: 1s infinite zoom-in-zoom-out;
}
@keyframes zoom-in-zoom-out {
	0% {
		transform: scale(1, 1)
	}
	50% {
		transform: scale(1.1, 1.1)
	}
	100% {
		transform: scale(1, 1)
	}
}



.box-blog-post,.nwm-box{
	box-shadow: inset 0px 0px 11px -1px #ff8e13;
    padding: 1.1%;
    border-radius: 10px;
}

.nwm-content {
  max-height: clamp(1000px, 60vh, 550px);   /* Giới hạn chiều cao khối */
  overflow-y: auto;                        /* Cho phép cuộn dọc nếu nội dung dài */
  padding: 16px;                           /* Khoảng cách bên trong */
  word-wrap: break-word;                   /* Ngắt từ nếu quá dài */
  border: 2px solid #FFD700;               /* Viền vàng */
  border-radius: 8px;                      /* Bo tròn góc */
  background: rgba(0, 0, 0, 0.6);          /* Nền đen mờ */
  
  /* Tùy biến thanh cuộn cho Firefox */
  scrollbar-width: thin;                  
  scrollbar-color: #FFD70022 transparent; /* Vàng mờ để không bị gắt */
  margin-bottom: 40px;
  margin-left: 15px;
  margin-right: 15px;
}

/* Thanh cuộn đẹp cho Chrome/Safari */
.nwm-content::-webkit-scrollbar {
  width: 4px;                              /* Mỏng gọn hơn */
}

.nwm-content::-webkit-scrollbar-thumb {
  background-color: #FFD70088;            /* Màu vàng mờ (88 là độ trong suốt ~53%) */
  border-radius: 4px;                      /* Bo tròn đầu/cuối */
}

.nwm-content::-webkit-scrollbar-track {
  background: transparent;                /* Trong suốt để không lộ khung */
}
/*-----------------------*\
    RESPONSIVE
\*-----------------------*/

/* Large desktops and laptops */
@media (min-width: 1200px) {

}

/* Portrait tablets and medium desktops */
@media (min-width: 992px) and (max-width: 1199px) {

}

/* Portrait tablets and small desktops */
@media (min-width: 768px) and (max-width: 991px) {

}

/* Landscape phones and portrait tablets */
@media (max-width: 767px) {

}

/* Landscape phones and smaller */
@media (max-width: 480px) {

}