/* NÚT */
.theme-toggle {
  position: fixed;
  right: 12px;
  bottom: 180px;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: none;
  cursor: pointer;
  z-index: 99999;

  display: flex;
  align-items: center;
  justify-content: center;

  background: #111;
  box-shadow: 0 8px 25px rgba(0,0,0,.35);
  transition: 
    background .3s ease,
    transform .2s ease,
    box-shadow .3s ease;
}

/* Hover */
.theme-toggle:hover {
  transform: scale(1.1) rotate(5deg);
  box-shadow: 0 0 18px rgba(255,255,255,.25);
}

/* Click */
.theme-toggle:active {
  transform: scale(.95);
}

/* Khi DARK MODE → nút nền TRẮNG */
body.darkmode .theme-toggle {
  background: #d9d9d9;
  box-shadow: 0 8px 25px rgba(255,255,255,.35);
}

/* ICON */
.theme-toggle .icon {
  position: absolute;
  width: 22px;
  height: 22px;
  stroke-width: 2;
  fill: none;
  transform-origin: center;
  transition: 
    transform .5s cubic-bezier(.22,1,.36,1),
    opacity .3s ease;
}

/* TRẠNG THÁI GỐC */
.theme-toggle .sun,
.theme-toggle .moon {
  opacity: 0;
  transform: scale(0) rotate(180deg);
}

/* Light Mode: hiện Sun */
body:not(.darkmode) .sun {
  opacity: 1;
  transform: scale(1) rotate(0deg);
  stroke: #fff;
}
body:not(.darkmode) .moon {
  opacity: 0;
  transform: scale(0) rotate(180deg);
}

/* Dark Mode: hiện Moon */
body.darkmode .sun {
  opacity: 0;
  transform: scale(0) rotate(180deg);
}
body.darkmode .moon {
  opacity: 1;
  transform: scale(1) rotate(0deg);
  stroke: #111;
}

/*Hiệu ứng chuyển chế độ*/
#themeOverlay {
  position: fixed;
  inset: 0;
  z-index: 99998;
  pointer-events: none;

  display: flex;
  align-items: center;
  justify-content: center;

  clip-path: circle(0% at 50% 50%);
  transition: 
    clip-path 1s cubic-bezier(.22,1,.36,1),
    background .3s linear;
  will-change: clip-path;
}
body.darkmode #themeOverlay {
  background: #0f1115;
}
body:not(.darkmode) #themeOverlay {
  background: #ffffff;
}

/* ICON GIỮA */
#themeOverlayIcon {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

#themeOverlayIcon .icon {
  position: absolute;
  width: 80px;
  height: 80px;
  stroke-width: 2;
  fill: none;
  opacity: 0;
  transform: scale(0.3);
  transition: 
    transform .6s cubic-bezier(.22,1,.36,1),
    opacity .4s ease;
}

/* DARK */
body.animating-dark #themeOverlay {
  background: #0f1115;
  clip-path: circle(150% at 50% 50%);
}
body.animating-dark #themeOverlayIcon .moon {
  opacity: 1;
  transform: scale(1);
  stroke: #fff;
}

/* LIGHT */
body.animating-light #themeOverlay {
  background: #ffffff;
  clip-path: circle(150% at 50% 50%);
}
body.animating-light #themeOverlayIcon .sun {
  opacity: 1;
  transform: scale(1);
  stroke: #111;
}
/*end*/

/*Page intro*/
body.darkmode .page-transition {
  background-image: url('/assets/images/loading-image-dark.webp');
}

body.darkmode .wrap-about .list-module .item-module a{
  background: #2c2c2c;
}
body.darkmode .wrap-about .list-module .item-module a p{
  color: #ffffff;
}
body.darkmode .footer-powered{
  color: #8c8c8c;
}
body.darkmode .footer-powered span{
  color: #ffffff;
}
/*End*/

/*Page intro*/
body.darkmode .cover-filter-left .item-filter-left ul li a{
  color: #ffffff;
}
body.darkmode .cover-filter-index {
    background: #161616;
}
body.darkmode .cover-filter-index .box-filter-index--searchmax select {
    background: #161616;
    color: #ffffff;
}
body.darkmode .search_desktop .search-grid_desktop input,
body.darkmode .search_desktop .search-grid_desktop{
  background: #2c2c2c;
}
body.darkmode .list_checkbox_index h3{
  background: #2c2c2c;
  color: #ffffff !important;
}
body.darkmode .search_desktop .search-grid_desktop input::placeholder {
  color: #cccccc;
}
body.darkmode .content-gd{
  background: #2c2c2c;
}
body.darkmode .content-gd.content-detail a,
body.darkmode .content-detail h1,
body.darkmode .content-detail h2,
body.darkmode .content-detail span,
body.darkmode .content-detail td{
  color: #ffffff !important;
  background: none !important ;
}
body.darkmode .content-detail a{
  color: #adc9ff !important;
}
body.darkmode .menu ul li a:hover, body.darkmode .menu ul li a.active {
  background: linear-gradient(90deg, #bed7ff, #d0b9ff, #ffd8d5); !important;
  -webkit-background-clip: text;
}
body.darkmode .template-item,
body.darkmode .cover-box-product{
  background: #2c2c2c;
}
body.darkmode .sticky-detail{
  background: #2c2c2c;
}
body.darkmode .template-title,
body.darkmode .template-info ul li,
body.darkmode .price-new,
body.darkmode .badge b,
body.darkmode .product-quick-view,
body.darkmode .cart-buy,
body.darkmode .price-new-pro-detail,
body.darkmode .detail-action-product .btn-preview{
  color: #ffffff;
}
body.darkmode .detail-action-product .btn-preview{
  border: 1px solid #b5b5b5;
}
/* Toàn bộ nội dung trong popup fancybox */
body.darkmode .fancybox__content,
body.darkmode .fancybox__content p,
body.darkmode .fancybox__content span,
body.darkmode .fancybox__content li,
body.darkmode .fancybox__content strong,
body.darkmode .fancybox__content b,
body.darkmode .fancybox__content h1,
body.darkmode .fancybox__content h2,
body.darkmode .fancybox__content h3,
body.darkmode .fancybox__content h4,
body.darkmode .fancybox__content h5,
body.darkmode .fancybox__content h6 {
  color: #ffffff !important;
}
body.darkmode .fancybox__content .cover-box-product a{
  color: #7cb1ff !important;
}
body.darkmode .cart-buy{
  border: 1px solid #ffffff;
}
body.darkmode .template-category {
  color: #b8b8b8;
}
body.darkmode .template-price, .price-old{
  color: #bbbbbb;
}
/*End*/
/*Darkmode code*/
body.darkmode {
  background: #161616;
  color: #ffffff;
}
body.darkmode .slogan-design-one p{
  color: #ffffff;
}
body.darkmode .content-detail.info-design-top-flex__desc span{
  color: #ffffff !important;
}
body.darkmode .top-bar .top-bar-child{
  background: #2c2c2c;
}
body.darkmode .top-bar{
  color: #ffffff;
}
body.darkmode .breadCrumbs {
  background-color: #2c2c2c;
}
body.darkmode .breadCrumbs .wrap-content .breadcrumb-item a{
  color: #ffffff;
}
body.darkmode .breadCrumbs .wrap-content .breadcrumb-item.active a {
  color: #c9c9c9;
}
body.darkmode .menu ul li a{
  color: #ffffff;
}
body.darkmode .wrap-design-top .info-design-top .info-design-top-flex .info-design-top-flex__title{
  color: #ffffff;
}
body.darkmode .title-main span{
  color: #ffffff;
}
body.darkmode .manu{
  background: #161616;
}
body.darkmode .cat_search-item span{
  color: #000000;
}
body.darkmode .box-info p{
  color: #a5a5a5;
}
body.darkmode .box-info p a{
  color: #ffffff;
}
body.darkmode .cover-content-top {
  background: #2c2c2c;
}
body.darkmode .custom-tab{
  background: #2c2c2c;
}
body.darkmode .custom-tab-description {
  color: #e3e3e3;
}
body.darkmode .custom-link{
  color: #ffffff;
}
body.darkmode .custom-card{
  background: #2c2c2c;
  transition: all 0.5s;
}
body.darkmode .custom-card:hover {
  background: #404040;
}
body.darkmode .custom-description strong a {
  color: #ffffff;
}
body.darkmode .custom-description p{
  color: #e3e3e3;
}
body.darkmode .custom-description span {
  color: #ffffff !important;
}
body.darkmode .custom-price{
  color: #ffffff;
}
body.darkmode .custom-btn{
  background: #525252;
  color: #ffffff;
}
.custom-btn.custom-selected {
    background: #2962B1 !important;
}
body.darkmode .custom-price span{
  color: #b1d5ff;
}
body.darkmode .custom-subtitle{
  color: #e3e3e3;
}
body.darkmode .custom-card.active{
  background: #404040;
}
body.darkmode .custom-select .selected {
  background: #4e4e4e;
  color: #ffffff;
}
body.darkmode .custom-options-earn{
  background: #4e4e4e;
}
body.darkmode .custom-options-earn li{
  color: #ffffff;
}
body.darkmode .custom-options-earn li span {
  color: #c8c8c8;
}
body.darkmode .footer-info span{
  color: #ffffff !important;
}
body.darkmode .footer-article{
  background: #2c2c2c;
}
body.darkmode .footer-ul li a {
  color: #dcdcdc;
}
body.darkmode .footer-title:after{
  background: #ffffff;
}
body.darkmode .footer-article:before{
  filter: brightness(0.25);
}
body.darkmode .copyright-footer {
  color: #b2b2b2;
}
body.darkmode .title-why{
  color: #ffffff;
}
body.darkmode .desc-why{
  color: #e3e3e3;
}
body.darkmode .why {
    background: #2d2d2d;
}
body.darkmode .why:hover .why-info .why-info__text__name{
  color: #ffffff;
}
body.darkmode .why .why-info .why-info__text__name{
  color: #ffffff;
}
body.darkmode .why .why-info .why-info__text__desc{
  color: #ffffff;
}
body.darkmode .why .why-info img {
    filter: invert(1);
}
body.darkmode.why .why-info .why-info__text__char i {
    background: #5f5f5f;
}
body.darkmode .footer-company .content-footer-top{
  background: #2d2d2d;
}
body.darkmode .footer-company .content-footer-top .item-footer-top p span{
  color: #ffffff;
}
body.darkmode .footer-company .content-footer-top:after{
  background: linear-gradient(to right, #2c2c2c, #FF0000, #2c2c2c);
}
body.darkmode .footer-company .content-footer-top:before{
  background: linear-gradient(to right, #2c2c2c, #FF0000, #2c2c2c);
}
body.darkmode  .scroll-module a{
  border-bottom: 3px solid #2d8cfa;
  background: #2c2c2c;
  color: #ffffff;
  transition: 0.5s;
}

/*Page cart*/
body.darkmode .title-cart{
  color: #ffffff;
}
body.darkmode .name-procart a{
  color: #ffffff;
}
body.darkmode .money-procart-child{
  color: #ffffff;
}
body.darkmode .text-gradient-1{
  background: linear-gradient(90deg, #8fb9ff, #c6a9ff, #ffa59d) !important;
  -webkit-background-clip: text !important;
}
body.darkmode .text-gradient-1-a{
  background: linear-gradient(to right, #ffffff, #ffffff, #ffffff) !important;
  -webkit-background-clip: text !important;
}
body.darkmode .copy-box{
  background:#2c2c2c !important;
      color: #ffffff !important;
}
body.darkmode .accNumber{
  background: #4d4d4d !important;
}
body.darkmode .copy-box u{
  color: #ffffff !important;
}
body.darkmode .upload-input{
  background-color: #2c2c2c;
  color: #fff;
  border-color: #444;
}
body.darkmode .form-floating .form-control {
  background-color: #2c2c2c; 
  color: #fff;                
  border-color: #444;
}
body.darkmode .form-floating.form-floating-cus>label {
    color: #d1d1d1;
}
body.darkmode .procart-label{
  background: #2c2c2c;
  border: 1px solid #eee;
}
body.darkmode .price-new-cart{
  color: #ffffff;
}
body.darkmode .table-dev table thead {
    background: #2c2c2c;
    border: 1px solid #eee;
}
body.darkmode .table-dev table tr:nth-child(even) {
    background: #2c2c2c;
}
body.darkmode .result-temp-procart-child {
  color: #ffffff !important;
}
body.darkmode  .coupon-procart{
  background: #2c2c2c;
  border: 1px solid #868686;
}
body.darkmode .coupon-procart input {
  color: #ffffff !important;
}
body.darkmode .coupon-procart input::placeholder {
  color: #cccccc !important;
}
/* Fix autofill nền trắng trong Dark Mode */
body.darkmode input:-webkit-autofill,
body.darkmode textarea:-webkit-autofill,
body.darkmode select:-webkit-autofill {
  -webkit-box-shadow: 0 0 0 1000px #2c2c2c inset !important; /* màu nền input dark */
  -webkit-text-fill-color: #fff !important; /* chữ trắng */
  caret-color: #fff;
  transition: background-color 9999s ease-in-out 0s;
}
body.darkmode .empty-cart p{
  color: #ffffff;
}

/*Thông báo đặt hàng thành công*/
body.darkmode .swal2-popup,
body.darkmode .loading-box,
body.darkmode .popup-box {
  background: #1f1f1f !important;
  color: #ffffff !important;
}

body.darkmode .modal-content {
  background: #1a1a1a !important;
  color: #ffffff !important;
  border: 1px solid #b5b5b5;
}

body.darkmode .modal h1,
body.darkmode .modal h2,
body.darkmode .modal h3,
body.darkmode .modal h6,
body.darkmode .modal p {
  color: #fff !important;
}

body.darkmode .loading-title {
  color: #fff !important;
}

body.darkmode .swal2-html-container,
body.darkmode .popup-box p {
  color: #cccccc !important;
}

/* Modal chờ thanh toán */
body.darkmode #cart-payment-notify .modal-content {
  background: #1a1a1a !important;
  color: #fff !important;
}

body.darkmode #cart-payment-notify .modal-title {
  color: #fff !important;
}

body.darkmode #cart-payment-notify .modal-des {
  color: #ccc !important;
}


/*Trang mmẫu giao diện*/

body.darkmode .grid-pro-detail{
    background: #2c2c2c !important;
    border-bottom: 30px solid #161616 !important;
}