/*
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.   ***************/
@media only screen and (max-width:48em) {
  /*************** ADD MOBILE ONLY CSS HERE  ***************/;
}
/* Background Ligh */:root {
  --primary:#244b39;
  --primary-dark:#fae54e;
  --accent:#ffbd0d;
  --text:#777777;
  --text-inverse:#ffffff;
  --border:color-mix(in srgb,var(--primary-dark) 30%,transparent);
  --hover:color-mix(in srgb,var(--primary) 10%,transparent);
  --radius:12px;
}
.content-home,
.taxonomy-description {
  text-align:justify;
  padding:10px 15px;
}
.content-home {
  border:8px ridge var(--primary-dark);
}
.taxonomy-description {
  max-height:600px;
  overflow-y:auto;
  overflow-x:hidden;
}
.taxonomy-description {
  max-height:200px;
}
.content-home::-webkit-scrollbar,
.taxonomy-description::-webkit-scrollbar {
  width:8px;
}
.content-home::-webkit-scrollbar-track,
.taxonomy-description::-webkit-scrollbar-track {
  background:rgba(18,24,31,0.06);
  border-radius:10px;
}
.content-home::-webkit-scrollbar-thumb,
.taxonomy-description::-webkit-scrollbar-thumb {
  background:linear-gradient(181deg,var(--primary),var(--primary-dark));
  border-radius:10px;
}
.content-home::-webkit-scrollbar-thumb:hover,
.taxonomy-description::-webkit-scrollbar-thumb:hover {
  filter:brightness(1.15);
}
.content-home,
.taxonomy-description {
  scrollbar-width:thin;
  scrollbar-color:var(--primary) rgba(18,24,31,0.06);
  margin-bottom:20px;
}
table {
  width:100%;
  border-collapse:separate;
  border-spacing:0;
  font-size:15px;
  color:var(--text);
  border-radius:var(--radius);
  overflow:hidden;
}
/* Header */table thead tr {
  background:linear-gradient(90deg,var(--primary),var(--primary-dark));
}
table th {
  padding:12px 16px;
  text-align:left;
  vertical-align:middle;
  color:var(--text-inverse);
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:0.3px;
  font-size:14px;
  border-bottom:2px solid var(--accent);
}
table th:first-child {
  padding-left:10px;
  border-top-left-radius:var(--radius);
}
table th:last-child {
  border-top-right-radius:var(--radius);
}
/* Body */table tbody tr {
  transition:background 0.2s ease;
}
table tbody tr:nth-child(even) {
  background:rgba(18,24,31,0.04);
}
table tbody tr:hover {
  background:var(--hover);
}
table td {
  padding:12px 16px;
  vertical-align:middle;
  color:var(--text);
  border-bottom:1px solid var(--border);
}
table td:first-child {
  padding-left:10px;
  border-left:1px solid var(--border);
}
table td:last-child {
  padding-left:10px;
  border-right:1px solid var(--border);
}
table tbody tr:last-child td:first-child {
  border-bottom-left-radius:var(--radius);
}
table tbody tr:last-child td:last-child {
  border-bottom-right-radius:var(--radius);
}
table tbody tr td:nth-child(2) strong {
  color:var(--accent);
  font-weight:600;
}
.wp-caption img {
  border-radius:5px 5px 0 0;
}
.wp-caption .wp-caption-text {
  color:var(--text-inverse);
  background:linear-gradient(120deg,var(--primary),var(--primary-dark));
  border-radius:0 0 5px 5px;
}
.entry-image img {
  border-radius:5px;
  border:1px solid var(--border);
}
.entry-header-text .entry-divider {
  display:none;
}
/* Post List */#post-list .box-image {
  border-radius:5px 0 0 5px;
  border:1px solid var(--primary);
  overflow:hidden;
  border-right:none;
}
#post-list .box-text {
  border-radius:0 5px 5px 0;
  border:1px solid var(--primary);
  overflow:hidden;
  border-left:none;
}
.section-title b {
  display:none;
}
.widget .current-cat {
  color:var(--text);
}
.widget .current-cat>a {
  color:var(--accent);
  font-weight:600;
}
.section-title.section-title-center {
  justify-content:center;
  text-align:center;
}
#page-breadcrumbs {
  margin-top:10px;
}
#page-breadcrumbs a {
  font-weight:600;
}
#page-breadcrumbs+#content {
  padding-top:0;
}
/* h1 .section-title-main {
  display:inline-block;
  background:linear-gradient(120deg,#00c6ff,#0072ff,#7a5cff,#ff3cac,#ff8a00,#00c6ff);
  background-size:200% 100%;
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
  animation:gradient-run 5s linear infinite;
}
*/@keyframes gradient-run {
  0% {
  background-position:200% 0;
}
100% {
  background-position:-200% 0;
}
}

.img-inner::before {
  position:absolute;
  top:0;
  left:-100%;
  z-index:2;
  display:block;
  content:'';
  width:50%;
  height:100%;
  background:linear-gradient(to right,rgba(255,255,255,0) 0%,rgba(255,255,255,.3) 100%);
  transform:skewX(-25deg);
  transition:left 0.75s ease-out;
}

.img-inner:hover::before {
  left:125%;
}
.btn-wathch > a {
  display:block;
  position:relative;
}

.btn-wathch > a::before {
  content:"";
  position:absolute;
  top:50%;
  left:50%;
  z-index:2;
  width:110px;
  height:42px;
  border-radius:10rem;
  background:var(--primary);
  filter:blur(16px);
  opacity:0;
  pointer-events:none;
  transform:translate(-50%,-30%) scale(.8);
  transition:opacity .3s ease,transform .3s ease;
}

.btn-wathch > a::after {
  content:"Xem ngay";
  position:absolute;
  top:50%;
  left:50%;
  z-index:3;
  padding:5px 15px;
  border:1px solid var(--primary-dark);
  border-radius:10rem;
  background:linear-gradient(
    90deg,var(--primary-dark),var(--primary),color-mix(in srgb,var(--primary) 55%,white),var(--primary),var(--primary-dark)
  );
  background-size:250% 100%;
  color:#fff;
  font-weight:700;
  line-height:1.5;
  white-space:nowrap;
  opacity:0;
  pointer-events:none;
  transform:translate(-50%,-30%) scale(.85);
  transition:opacity .3s ease,transform .3s ease;
  animation:watch-gradient 3s linear infinite;
}

.btn-wathch:hover > a::before,
.btn-wathch:hover > a::after {
  opacity:1;
  transform:translate(-50%,-50%) scale(1);
}

@keyframes watch-gradient {
  from {
    background-position:0% 50%;
  }
  to {
    background-position:100% 50%;
  }
}