/*
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.   ***************/
.back-to-top.active {
    opacity: 1;
    pointer-events: inherit;
    transform: translateY(0);
    right:5%;
}

ol, ul{
    list-style-position: inside; 
    padding: 0; 
    margin: 0 0 20px 0; 
}
.footer-primary, .footer-primary a {color: #fff;}
#post-list {margin-top: 10px;margin-bottom: 10px;}
.box-blog-post:hover {background: #ff000024;border-radius: 10px;padding: 10px;}
.slider-style-focus .flickity-slider>:not(.is-selected) {opacity: .3;}
.author-description,.category-description  {
border: 1px solid #ff0000;
    background-color: #f9f9f9;
    padding: 15px;
    margin-bottom: 20px;
    border-radius: 10px;
}
.author-description h2 {margin-top: 0;font-size: 24px;}
.author-description div {font-size: 16px;color: #555;}
.danhgia .icon-box-img img { height: 100px;}
.slider-nav-light .flickity-prev-next-button .arrow, .slider-nav-light .flickity-prev-next-button svg {fill: #ff0000;}
.flickity-page-dots .dot.is-selected {background-color: #ff0000;border:2px solid #fff;width:20px;opacity: 1 !important;}
.flickity-page-dots .dot {border: 3px solid #ff0000;border-radius: 10px ;cursor: pointer;display: inline-block;height: 12px;margin: 0 5px;opacity: .4;transition: opacity .3s;width: 12px;}
.banner+.section-title-container, .row-collapse+.section-title-container, .slider-wrapper+.section-title-container {margin-top:0; }
.slider-style-focus {background-color: transparent;padding: 0 0 25px 0;}
#col-30379723 > .is-sticky-column > .is-sticky-column__inner > .col-inner {padding:0 !important}
.ux-menu.stack.stack-col.justify-start {padding: 10px 10px 0 10px;}
.toplist .button {margin: 10px !important;}
.linkhome {background: #ff000054;border-radius: 10px;}.linkhome td, .linkhome th {border-color: #ff0000 !important}
.linkhome tr {background: none !important;}
.linkhome .btn {background: #ff0000;padding: 5px 10px;border-radius: 10px; display: flex; color: #fff;}
.linkhome .btn:hover {background: white;}
.toplist img {max-width: 150px;height: auto;}
.kvbutton .primary.button2 {background: #ffffff !important;color: #ff0000;}
.kvbutton .primary.button1 {background: #fff;color: #ff0000;border: 1px solid #0a0000;}
.toplist:before {
    content: '';
    position: absolute;
    top: 0%;
    left: 3%;
    transform: translate(-50%, -50%);
    background-image: url(/wp-content/uploads/2024/07/topuD5Co.webp);
    background-size: contain;
    background-repeat: no-repeat;
    width: 44px;
    height: 50px;
}.toplist::after {
    content: '1';
    position: absolute;
    top: -8px;
    left: 3%;
    transform: translate(-50%, -50%);
    z-index: 1;
    color: white;
    font-size: 23px;
    font-weight: bold;
}
.toplist td, .toplist th {border-color: hsl(0deg 0% 100%);}
.toplist tr {background: none !important;}.toplist td {color: white !important;}
@keyframes blinkBorder {
    0% {
        border: 4px solid red;
    }
    25% {
        border: 4px solid yellow;
    }
    50% {
        border: 4px solid green;
    }
    75% {
        border: 4px solid blue;
    }
    100% {
        border: 4px solid red;
    }
}
.toplist {position: relative;animation: blinkBorder 0.5s infinite;
    border: 2px solid gold;
    border-radius: 10px;
    background: #ff0000;}.toplist .col-inner p, .toplist .col-inner h3 {color: #fff !important;}
.toplist .btn.code {
    background: white;
    padding: 5px 10px;
    border-radius: 10px;
    font-weight: 600;
    text-transform: uppercase;
}.toplist .btn.code:hover {background: gold;color: #fff;}
.dark td, .dark th {
    border-color: #ff0000;
}
table {
    border-color: #ff0000;
    border-spacing: 0;
    width: 100%;
    border-collapse: collapse;
    margin: 20px 0;
    font-size: 16px;
    text-align: left;
}
a.btn {
    background: #5c5cf6;
    padding: 10px 20px;
    border-radius: 5px;
    color: #fff !important;
    display: flex;
    align-items: center;
    font-weight: bold !important;
    justify-content: center;
}
.col-inner ol li, .col-inner ul li, .entry-content ol li, .entry-content ul li, .entry-summary ol li, .entry-summary ul li {
    margin-left: 10px !important;
}
table th, table td {padding: 10px 10px !important;border: 1px solid #ddd;}
table thead th {background-color: #ff0000;color: white;}
h1.entry-title {white-space: normal;}
.taxonomy-description {
    border: 2px solid #ff0000;
    padding: 10px;
    border-radius: 10px;
    margin-bottom: 10px;}
.back-to-top {bottom: 75px;background: #ff0000 !important;border: 2px solid #ffffff !important;}
.last {font-weight: 600;}
nav.rank-math-breadcrumb a {    background: #ff0000;
    padding: 3px 8px;
    border-radius: 10px;
    color: #fff;
    display: inline-block;}
nav.rank-math-breadcrumb a:hover {background: #ffbcbc45;color: #ff0000;}
.page-title {position: relative;padding-left: 10px;}
.page-wrapper {padding-bottom: 0;padding-top: 0;
}.col-inner.dark {margin: 0px 0px 0px 0px;}
.col.medium-12.small-12.large-10 {padding: 10px !important;}
.searchform-wrapper .autocomplete-suggestions {
    -webkit-overflow-scrolling: touch;
    max-height: 50vh;
    overflow-y: scroll;
    overflow-y: auto;
    background: #fff;
    border-radius: 10px;
    margin-top: 10px;
}
:root {
    --primary-color: #ff0000 !important;
    --fs-color-primary: #ff0000 !important;
    --fs-color-secondary: #d26e4b;
    --fs-color-success: #7a9c59;
    --fs-color-alert: #b20000;
    --fs-experimental-link-color: #262626;
    --fs-experimental-link-color-hover: #111;
}
.slider-nav-circle .flickity-prev-next-button .arrow, .slider-nav-circle .flickity-prev-next-button svg {
    border: 2px solid;
    border-radius: 100%;
    background: #ffffff;
    color: #ff0000;
}
.slider-show-nav .flickity-prev-next-button, .slider:hover .flickity-prev-next-button {opacity: 1;transform: translateX(0) !important;}
.header-top {
    background-color: #ff0000;
    min-height: 20px;
    position: relative;
    z-index: 11;
}
.box-text h5 a {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}
:root {
    --navicolor: #333;
    --backchatbg: #fff;
    --bordcolor: #ff0000;
    --backcolor: #fff;
    --backchatcolor: #ffffffd6;
    --textchatcolor: #333;
}
.ft-navi .ft-navi-cen-span {
    background: #ff0000 !important;
}
.single-page {
    border: 1px solid #ff0000;
    border-radius: 10px;
    padding: 10px;
    margin-top: 10px;
}
nav.rank-math-breadcrumb {
	    color: #ff0000;
    padding: 2px 10px;
    border-radius: 10px;
    margin: 10px 0;}
.rank-math-breadcrumb p {margin-bottom:0 !important}
span.separator {padding: 5px;}
.entry-header-text {
    border: 2px solid #ff0000;
    border-radius: 10px;
    padding: 0 10px; 
}
.is-divider {
    background-color: rgba(0, 0, 0, .1);
    display: block;
    height: 0;
    margin: 0;
    max-width: 30px;
    width: 100%;
}
span.widget-title {
    font-size: 1em;
    font-weight: 600;
    color: #ff0000;
}
.widget ul {
    margin: 0;
    border: 1px solid #ff0000;
    border-radius: 10px;
    padding: 0 10px;
}
h2, h3, h4, .post-title {
    white-space: normal;
    text-wrap: auto;
}
blockquote, dl, figure, form, ol, p, pre, ul {
    margin-bottom: 0.3em;
}
.textwidget {
    overflow: hidden;
}
.dark .heading-font, .dark a.lead, .dark h1, .dark h2, .dark h3, .dark h4, .dark h5, .dark h6, .dark label, .hover-dark:hover a, .hover-dark:hover h1, .hover-dark:hover h2, .hover-dark:hover h3, .hover-dark:hover h4, .hover-dark:hover h5, .hover-dark:hover h6, .hover-dark:hover p {
    color: #ff0000;
}
.custom-table {
            border-collapse: collapse;
            width: 100%;
        }

        .custom-table th, .custom-table td {
            border: 1px solid #dddddd;
            text-align: center;
            padding: 8px;
        }

        .custom-table th {
            background-color: #4CAF50;
            color: white;
        }

        .custom-table tr:nth-child(even) {
            background-color: #f2f2f2;
        }

        .custom-table tr:hover {
            background-color: #ddd;
        }

        .custom-table .highlight {
            color: #008000;
            font-weight: bold;
        }

        .custom-table .access {
            color: blue;
            font-weight: bold;
        }
.row-small>.col, .row-small>.flickity-viewport>.flickity-slider>.col {
     padding: 10px 9px 10px;
    border-radius: 10px;
    margin: 0px 3px;
}
.box-text {
    font-size: .9em;
    padding-bottom: 0;
    padding-top: 0;
    position: relative;
    width: 100%;
}
.borderx {background:#fff}
.header-shadow .header-wrapper, .header-wrapper.stuck, .layout-shadow #wrapper {
    box-shadow: 1px 1px 10px rgb(255 255 255 / 0%);
}
.container .row:not(.row-collapse), .lightbox-content .row:not(.row-collapse), .row .gallery, .row .row:not(.row-collapse) {
    margin-left: 0;
    margin-right: 0;
    padding-left: 0;
    padding-right: 0;
    width: auto;margin-bottom:1em;
}.header-main {
z-index: 10000;
    position: sticky;
    top: 0;
    left: 0;
    width: 100%;
}
.dark .widget a, .dark a {
    color: #ff0000;
    font-weight: 600;
}
.dark, .dark p, .dark td {
    color: #000;
}

.button.alt, .button.checkout, .checkout-button, .secondary {
    background-color: #ff0000;
}
img {
    display: inline-block;
    height: auto;
    max-width: 100%;
    vertical-align: middle;
    border-radius: 10px;
}
.header-button .button {
    margin: 0;
    background: #ff0000;    padding: 5px 10px;
}
.off-canvas-left.dark .mfp-content, .off-canvas-right.dark .mfp-content {
    background-color: #ff0000;
}
.dark .nav-sidebar.nav-vertical>li+li, .dark .nav-vertical-fly-out>li+li {
    border-color: hsl(0deg 0% 100% / 0%);
}
i.icon-menu {
    color: #fff;
}
.ux-menu-link__text {
    display: flex;
    align-items: center;
}
span.ux-menu-link__text {
    color: #ff0000;
	font-size:18px;
}

.section-title b {
    background-color: currentColor;
    display: block;
    flex: 1;
    height: 0px;
    opacity: 0;
}
.section-title-container {
    margin-bottom: 1em;margin-top:10px
}
.large-12.col-thongtin {
	display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
}
.col-thongtin .button {margin-bottom: .5em;margin-right: 5px !important;}
.nguoidang, .ngaydang, .chuyenmuc, .luot-xem, .col-thongtin .button {margin-right: 20px;margin-top: .5em;}
.binhluan:before, .nguoidang:before, .ngaydang:before, .chuyenmuc:before {
    font-family: 'FontAwesome';
    padding-right: 7px;
}
.nguoidang:before {
    content: "\f4ff";
}
.ngaydang:before {
    content: "\f017";
}
.chuyenmuc:before {
    content: "\f07c";
}
.binhluan:before {
    content: "\f086";
}
.khungcuon {
    height: auto;
    overflow: auto;
    padding: 1%;
    border: 2px solid #ff0000;
    border-radius: 10px;
}
/* Customize scrollbar for WebKit-based browsers */
.khungcuon::-webkit-scrollbar {
    width: 10px; /* Width of the scrollbar */
}

.khungcuon::-webkit-scrollbar-track {
    background: none; /* Background of the scrollbar track */
    border-radius: 10px;
}

.khungcuon::-webkit-scrollbar-thumb {
    background: #ff0000; /* Color of the scrollbar thumb */
    border-radius: 10px;
    border: 2px solid #ffffff; /* Adds a border around the thumb */
}

.khungcuon::-webkit-scrollbar-thumb:hover {
    background: #0b8703; /* Color of the scrollbar thumb on hover */
}

@media screen and (max-width: 849px) {
    .col {
        padding-bottom: 20px;
    }
}
@media screen and (min-width: 850px) {
    .large-2 {
        flex-basis: 16.5%;
        max-width: 16.5%;
    }
	    .large-10 {
        flex-basis: 83%;
        max-width: 83%;
    }
	 .large-4 {
        flex-basis: 30%;
        max-width: 30%;
    }
	    .large-3 {
        flex-basis: 25%;
        max-width: 25%;
    }
	  .large-8 {
        flex-basis: 66.6666666667%;
        max-width: 65.666667%;
    }
	    .is-sticky-column:not([data-sticky-mode]) {
        top: calc(var(--flatsome-scroll-padding-top));
        transition: top .6s;
    }
	 .large-7 {
        flex-basis: 69%;
        max-width: 69%;
    }
	.row-large>.col, .row-large>.flickity-viewport>.flickity-slider>.col {
        margin-bottom: 0;
        padding: 0 10px 10px;
    }
}
.imgicon img {
    align-self: center;
    height: auto;
    justify-self: center;
}
.imgicon .img-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%; /* Ensure the flex container takes the full height of the parent */
}
.kvbutton .button2:last-of-type {margin-right: 10px !important;}
@media screen and (min-width: 850px) {
   
}
@media screen and (min-width: 550px) {
    .box-list-view .box .box-text, .box-vertical .box-text {
        padding-left: 1em;
        padding-right: 1em;
    }
}
@media screen and (max-width: 549px) {
    .row-slider .flickity-prev-next-button {
        background-color: transparent !important;
        box-shadow: none !important;
        opacity: 1;
        transform: translateX(0) !important;
        width: 20px !important;
    }
	.flickity-slider {height: 100%;position: absolute;width: 100%;}
	.slide1 .flickity-slider {width: 80%;left: 20px !important;}
	.flickity-slider .is-selected {z-index:1}
	.kvbutton .col-inner {display: flex;justify-content: center;flex-direction: column;}
}
	.slide1 .flickity-viewport {padding: 10px;overflow: unset;}
}