#splw-location-weather-162.splw-main-wrapper {
  max-width: 100% !important;
}

.splw-lite-wrapper.lw-preloader-wrapper {
  box-shadow: 0 4px 30px #00000012;
}

#splw-location-weather-162 .splw-weather-details .splw-weather-icons,
#splw-location-weather-162 .splw-lite-header-title,
#splw-location-weather-162 .splw-lite-desc {
  color: #000 !important;
}

.header-bottom{
  box-shadow: 0 4px 30px #00000012 !important;
}


.hover_all:hover {
  background: var(--color-v1);
  box-shadow: 0 3px 12px var(--color-v1);
  color: white;
}

/* From Uiverse.io by Galahhad */
/* switch settings 👇 */

.ui-switch {
  --switch-bg: #88888826;
  --switch-width: 48px;
  --switch-height: 20px;
  --circle-diameter: 32px;
  --circle-bg: var(--color-v1);
  --circle-inset: calc((var(--circle-diameter) - var(--switch-height)) / 2);
}

.ui-switch input {
  display: none !important;
}

.slider_round {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  width: var(--switch-width);
  height: var(--switch-height);
  background: var(--switch-bg);
  border-radius: 999px;
  position: relative;
  cursor: pointer;
}

.slider_round .circle {
  top: calc(var(--circle-inset) * -1);
  left: 0;
  width: var(--circle-diameter);
  height: var(--circle-diameter);
  position: absolute;
  background: var(--circle-bg);
  border-radius: inherit;
  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMjAiIHdpZHRoPSIyMCIgdmlld0JveD0iMCAwIDIwIDIwIj4KICAgIDxwYXRoIGZpbGw9IiNmZmYiCiAgICAgICAgZD0iTTkuMzA1IDEuNjY3VjMuNzVoMS4zODlWMS42NjdoLTEuMzl6bS00LjcwNyAxLjk1bC0uOTgyLjk4Mkw1LjA5IDYuMDcybC45ODItLjk4Mi0xLjQ3My0xLjQ3M3ptMTAuODAyIDBMMTMuOTI3IDUuMDlsLjk4Mi45ODIgMS40NzMtMS40NzMtLjk4Mi0uOTgyek0xMCA1LjEzOWE0Ljg3MiA0Ljg3MiAwIDAwLTQuODYyIDQuODZBNC44NzIgNC44NzIgMCAwMDEwIDE0Ljg2MiA0Ljg3MiA0Ljg3MiAwIDAwMTQuODYgMTAgNC44NzIgNC44NzIgMCAwMDEwIDUuMTM5em0wIDEuMzg5QTMuNDYyIDMuNDYyIDAgMDExMy40NzEgMTBhMy40NjIgMy40NjIgMCAwMS0zLjQ3MyAzLjQ3MkEzLjQ2MiAzLjQ2MiAwIDAxNi41MjcgMTAgMy40NjIgMy40NjIgMCAwMTEwIDYuNTI4ek0xLjY2NSA5LjMwNXYxLjM5aDIuMDgzdi0xLjM5SDEuNjY2em0xNC41ODMgMHYxLjM5aDIuMDg0di0xLjM5aC0yLjA4NHpNNS4wOSAxMy45MjhMMy42MTYgMTUuNGwuOTgyLjk4MiAxLjQ3My0xLjQ3My0uOTgyLS45ODJ6bTkuODIgMGwtLjk4Mi45ODIgMS40NzMgMS40NzMuOTgyLS45ODItMS40NzMtMS40NzN6TTkuMzA1IDE2LjI1djIuMDgzaDEuMzg5VjE2LjI1aC0xLjM5eiIgLz4KPC9zdmc+");
  background-repeat: no-repeat;
  background-position: center center;
  -webkit-transition: left 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, -webkit-transform 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
  -o-transition: left 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, transform 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
  transition: left 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, transform 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, -webkit-transform 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  box-shadow: 0px 2px 1px -1px rgba(0, 0, 0, 0.2), 0px 1px 1px 0px rgba(0, 0, 0, 0.14), 0px 1px 3px 0px rgba(0, 0, 0, 0.12);
  ;
}

.slider_round .circle::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 0.75);
  border-radius: inherit;
  -webkit-transition: all 500ms;
  -o-transition: all 500ms;
  transition: all 500ms;
  opacity: 0;
}

.ui-switch input:checked+.slider_round .circle {
  left: calc(100% - var(--circle-diameter));
  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMjAiIHdpZHRoPSIyMCIgdmlld0JveD0iMCAwIDIwIDIwIj4KICAgIDxwYXRoIGZpbGw9IiNmZmYiCiAgICAgICAgZD0iTTQuMiAyLjVsLS43IDEuOC0xLjguNyAxLjguNy43IDEuOC42LTEuOEw2LjcgNWwtMS45LS43LS42LTEuOHptMTUgOC4zYTYuNyA2LjcgMCAxMS02LjYtNi42IDUuOCA1LjggMCAwMDYuNiA2LjZ6IiAvPgo8L3N2Zz4=");
}

.ui-switch input:active+.slider_round .circle::before {
  -webkit-transition: 0s;
  -o-transition: 0s;
  transition: 0s;
  opacity: 1;
  width: 0;
  height: 0;
}


.icon_header::after {
  content: '';
  width: 1px;
  height: 16px;
  background-color: #88888866;
  display: block;
}

.menu_seach ul {
  list-style: none;

}

.menu_seach ul li a {
  font-size: 13px;
  color: var(--color-main);
  font-weight: 500;
}

.menu_seach ul li a:hover {
  color: var(--color-v1) !important;
  transition: all 0.3s ease-in-out;
}

.searh_footer ul {
  display: flex;
  align-items: center;
  gap: 10px;
  list-style: none;
}

.searh_footer ul li a {
  font-size: 13px;
  color: var(--color-main);
  font-weight: 500;
  display: flex;
  align-items: center;
}

.searh_footer ul li a:hover {
  color: var(--color-v1) !important;
  transition: all 0.3s ease-in-out;
}

.searh_footer ul li a::after {
  content: '';
  width: 3px;
  height: 3px;
  border-radius: 9999px;
  background-color: #88888866;
  display: block;
  margin: 0 10px;
}

.home .comments-area {
  display: none !important;
}

.hidden_c {
  display: none;
}

.header-nav.header-bottom-nav>li>a {
  font-size: 15px !important;
  font-weight: 600 !important;
}

.header-nav.header-bottom-nav>li>a::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 3px;
  background-color: var(--color-v1);
  transition: width 0.3s ease;
}

.header-nav.header-bottom-nav>li>a:hover::after {
  width: 100%;
}

.stuck .header-main .nav>li>a {
  line-height: 1.5 !important;
}

.header-nav.header-bottom-nav>li.active>a::after {
  width: 100%;
}

.header-nav.header-bottom-nav>li.has-dropdown>.sub-menu.nav-dropdown {
  box-shadow: 0 4px 30px #00000012 !important;
  border-radius: 7px !important;
  border: none !important;
}

.header-nav.header-bottom-nav>li>a>i {
  font-weight: bold !important;
  display: inline-block;
  transition: transform 0.3s ease;
  color: #000 !important;
}

.header-nav.header-bottom-nav>li>a:hover>i {
  transform: rotate(180deg);
}

.login_gg {
  width: 100%;
}

.login_gg .nsl-container-buttons {
  width: 100%;
  padding: 0px 0 !important;
}

.login_gg .nsl-container-buttons a {
  margin: 0 0 !important;

}

.login_gg .nsl-container-buttons .nsl-button {
  justify-content: center;
  border-radius: 999px !important;
}

.login_gg .nsl-container-buttons .nsl-button-label-container {
  flex: 0 0 auto !important;
}

.wpdt-c>.powered_by_link {
  display: none !important;
}

.form-footer form input {
  box-shadow: none !important;
}

.header-block>.header-block-block-2 {
  width: 100%;
}

.mfp-content {
  width: 100% !important;
  padding: 20px !important;
  background: white !important;
}

.mfp-content .sidebar-menu {
  padding: 0 0 !important;
}

.mobile_menu .ux-menu-link__link {
  font-weight: 700 !important;
  padding: 7px 0 !important;
}

.mobile_menu .ux-menu-link__link:hover {
  color: var(--color-v1) !important;
  transition: all 0.3s ease-in-out;
}

.logo_mobile .ux-logo-link {
  padding: 0 !important;
}

.text-nowrap {
  white-space: nowrap !important;
}

.chart_home .wpDataTablesWrapper table.wpDataTable>thead>tr>th {
  color: white !important;
  border: none !important;
  border-bottom-width: 0 !important;
  font-weight: 700;
  padding: 7px 10px;
  text-align: center !important;
  cursor: pointer;
  background-color: var(--color-v1) !important;
}

 .wpDataTablesWrapper table.wpDataTable tr.odd td,
.chart_home .wpDataTablesWrapper table.wpDataTable tr.odd td.sorting_1 {
  background-color: white !important;
  height: 25.72px !important;
  padding-left: 10px !important;
}
.chart_home .wpDataTablesWrapper table.wpDataTable > tbody > tr > td, .wpDataTablesWrapper table.wpDataTable > tfoot > tr > td{
border-bottom: 1px solid !important;
  border-top: none !important;
  border-left: none !important;
  border-right: none !important;
}
.chart_home .wpDataTablesWrapper table.wpDataTable>tbody>tr>td.sorting_1 {
  height: 25.72px !important;
}

.chart_home .wpDataTablesWrapper table.wpDataTable tr.even td.sorting_1 {
  background-color: white !important;
  padding-left: 10px !important;
  height: 25.72px !important;
}

/* .chart_home .wpDataTablesWrapper table.wpDataTable>tbody>tr>td,
.wpDataTablesWrapper table.wpDataTable>tfoot>tr>td {
  height: 26px !important;
} */

.icon__twitter,
.icon__twitter::before {
  background-image: url("./theme/frontend/images/zalo-ic.png");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}
.slide_new_banner .flickity-button.flickity-prev-next-button.previous,
.slide_new_banner .flickity-button.flickity-prev-next-button.next{
 opacity: 1;
 aspect-ratio: 1;
 border-radius: 999px;
 min-height: auto !important;
 background: var(--color-v1);
 transition: all 0.3s ease !important;
 transform: none !important;
 color: #000 !important;
 border: 1px solid var(--color-v1);
}
.slide_new_banner .flickity-button.flickity-prev-next-button.previous{
  left: -16px !important;
}
.slide_new_banner .flickity-button.flickity-prev-next-button.next{
  right: -4px !important;
}
.slide_new_banner .flickity-page-dots{
 bottom: -30px !important;
}
.slide_new_banner .flickity-page-dots li{
  background: var(--color-v1) !important;
  width: 16px !important;
  height: 16px !important;
}
.chart_home .wpdt-c {
  overflow-x: auto !important;
}

.menu-search-2 {
  display: flex !important;
  flex-direction: row !important;
  font-weight: 700;
  font-size: 0.8125rem;
}

.menu-search-2 .menu-item {
  align-items: center;
}

.menu-search-2 .menu-item a:hover {
  color: var(--color-v1);
}

.menu-search-2 .menu-item:not(:last-child)::after {
  content: "";
  display: inline-block;
  width: 4px;
  height: 4px;
  margin-right: 10px;
  margin-left: 10px;
  opacity: 0.2;
  background-color: var(--color-main);
}

.avatar-container {
  position: relative;
}

.dropdown-logout {
  position: absolute;
  right: 0;
  top: 110%;
  border-radius: 0.375rem;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s ease, transform 0.2s ease;
  z-index: 50;
}

.avatar-container:hover .dropdown-logout {
  opacity: 1;
  visibility: visible;
}

.dropdown-logout a {
  display: block;
  color: var(--color-main);
  text-decoration: none;
  font-size: 14px;
  padding: 0.25rem 1rem;
  background-color: #ffffff;
  white-space: nowrap;
  font-weight: 600;
}

.dropdown-logout a:hover {
  background-color: #f3f4f6;
  transition: all 0.2s ease;
}

#splw-location-weather-162 .splw-lite-daily-weather-details .details-icon i{
  color: #000;
}
body.dark-theme #splw-location-weather-162 .lw-title-wrapper .options-title{
  color: white;
}
body.dark-theme #splw-location-weather-162 .splw-cur-temp{
  color: white;
}
body.dark-theme #splw-location-weather-162 .splw-lite-daily-weather-details .details-icon i{
  color: white;
}
body.dark-theme .splw-main-wrapper .splw-weather-details .options-value{
  color: white;
}
body.dark-theme {
  --color-main: #ffffff;
  --color-v1: #44c2e0;
  --color-v2: #62b088;
  --color-v3: #ffffff;
  --color-v4: #ffffff;
  background-color: #1a1a1a;
  color: #ffffff;
  transition: background-color 0.5s ease, color 0.5s ease;
}

body.dark-theme .header-main {
  background-color: #2d2d2d !important;
  border-bottom: 1px solid #404040;
}

body.dark-theme .container {
  background-color: transparent;
}

body.dark-theme .bg-white {
  background-color: #2d2d2d !important;
  color: #ffffff;
}

body.dark-theme input,
body.dark-theme textarea,
body.dark-theme select {
  background-color: #404040 !important;
  color: #ffffff !important;
  border-color: #555555 !important;
}

body.dark-theme input::placeholder,
body.dark-theme textarea::placeholder {
  color: #cccccc !important;
}

body.dark-theme .border-colorMain {
  border-color: #555555 !important;
}

body.dark-theme .text-colorMain {
  color: #ffffff !important;
}

/* body.dark-theme .bg-black {
  background-color: #0d0d0d !important;
} */

body.dark-theme .text-white {
  color: #ffffff !important;
}

body.dark-theme .text-gray-500 {
  color: #cccccc !important;
}

body.dark-theme .bg-efefef {
  background-color: #2d2d2d !important;
}


body.dark-theme .splw-lite-wrapper.lw-preloader-wrapper {
  background-color: #2d2d2d !important;
  color: #ffffff !important;
}

body.dark-theme #splw-location-weather-162 .splw-weather-details .splw-weather-icons,
body.dark-theme #splw-location-weather-162 .splw-lite-header-title,
body.dark-theme #splw-location-weather-162 .splw-lite-desc {
  color: #ffffff !important;
}

body.dark-theme .menu_seach ul li a {
  color: #ffffff !important;
}

body.dark-theme .searh_footer ul li a {
  color: #ffffff !important;
}

body.dark-theme .header-nav.header-bottom-nav>li>a {
  color: #ffffff !important;
}

body.dark-theme .header-nav.header-bottom-nav>li>a>i {
  color: #ffffff !important;
}

body.dark-theme .header-nav.header-bottom-nav>li.has-dropdown>.sub-menu.nav-dropdown {
  background-color: #2d2d2d !important;
  border-color: #404040 !important;
}

body.dark-theme .header-nav.header-bottom-nav>li.has-dropdown>.sub-menu.nav-dropdown a {
  color: #ffffff !important;
}
body.dark-theme .header-bottom{
    background-color: #2d2d2d !important;
}
body.dark-theme .header-nav.header-bottom-nav>li.has-dropdown>.sub-menu.nav-dropdown a:hover {
  background-color: #404040 !important;
}
body.dark-theme {
    --color-main: #ffffff;
}

/* Light Theme Styles (mặc định) */
body.light-theme {
  --color-main: #282828;
  --color-v1: #44c2e0;
  --color-v2: #62b088;
  --color-v3: #000;
  --color-v4: #000;
  background-color: #ffffff;
  color: #282828;
  transition: background-color 0.3s ease, color 0.3s ease;
}

/* Smooth transitions cho tất cả elements */
/* body * {
  transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
} */

/* Footer dark theme */
body.dark-theme footer {
  background-color: #1a1a1a !important;
  color: #ffffff !important;
}

body.dark-theme {
  background: #1a1a1a !important;
  color: #ffffff !important;
}

body.dark-theme .mfp-content {
  background: #2d2d2d !important;
  color: #ffffff !important;
}

body.dark-theme #wrapper,
body.dark-theme #main {
  background: #1a1a1a !important;
  color: #ffffff !important;
}

body.dark-theme .footer-dot {
  background: #1a1a1a !important;
  color: #ffffff !important;
}

body.dark-theme footer .col {
  color: #ffffff !important;
}

body.dark-theme footer a,
body.dark-theme .text-black {
  color: #ffffff !important;
}

body.dark-theme footer a:hover {
  color: var(--color-v1) !important;
}

/* Cards và boxes */
body.dark-theme .box,
body.dark-theme .card {
  background-color: #2d2d2d !important;
  border-color: #404040 !important;
}

/* Buttons */
body.dark-theme .button,
body.dark-theme .btn {
  background-color: #404040 !important;
  color: #ffffff !important;
  border-color: #555555 !important;
}

body.dark-theme .button:hover,
body.dark-theme .btn:hover {
  background-color: #555555 !important;
}

.logo_sticky .ux-logo-link {
  padding: 0 !important;
}
.header-wrapper .logo_sticky{
  display: none;

}
.header-wrapper.stuck .logo_sticky{
  display: block !important;

}
.nav.nav-vertical li{
  width: 100% !important;
}

.header-block{
  width: auto !important;
}

button.loading span:not(.loading-spinner) {
    opacity: 0;
}
button.loading .loading-spinner {
    display: block;
}
.menu_footer_tilte{
  color: var(--color-main) !important;
}

#tts__listent_content_2{
  background: var(--color-v1) !important;
  border: none !important;
}
.header-main .hide-for-medium.flex-left{
  flex :0 0 !important;
  margin: 0 auto !important;
}
.header-main .hide-for-medium.flex-right{
  margin-left:0 !important ;
}
@media (min-width: 768px) {
  .md\:w-\[510px\] {
    width: 510px;
  }
}

@media (min-width: 1024px) {
  .lg\:-translate-x-1\/2 {
    --tw-translate-x: -50%;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  }
}