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

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

/* =========================
   GENERAL STYLES
========================= */
.follow-icons a.zalo svg {
  width: 20px;
  color: #ffffff;
}

.button.zalo:not(.is-outline),
.button.zalo:hover {
  color: #0068ff !important;
}

.footer-menu .sidebar-wrapper {
  display: flex;
}

.footer-menu .widget_product_categories>ul>li {
  display: list-item;
}

.footer-bottom-custom-block p {
  margin-bottom: 5px;
}

.absolute-footer {
  padding: 15px 0;
}

.search-type-label {
  margin: 0 5px;
}

.select-resize-ghost,
.select2-container .select2-choice,
.select2-container .select2-selection,
input[type=date],
input[type=email],
input[type=number],
input[type=password],
input[type=search],
input[type=tel],
input[type=text],
input[type=url],
select,
textarea {
  padding: 0 1.25em;
}

.df-posts>.df-popup-thumb {
  width: calc(25% - 30px);
}

.df-posts {
  text-align: left;
}

/* =========================
   LOGO GALLERY
========================= */
.logo-gallery {
  width: 100%;
  min-width: 100%;
  display: block;
  clear: both;
}

.logo-gallery .bkns-rows {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  width: 100%;
  min-width: 100%;
}

.logo-gallery .bkns-col {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 15px;
  background: #fff;
  overflow: hidden;
}

.logo-gallery .bkns-col img {
  max-width: 100%;
  max-height: 100px;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
}


/* =========================
   FLOATING CONTACT BUTTON
========================= */

.floating-contact{
    position:fixed;
    z-index:999999;

    display:flex;
    flex-direction:column;
    align-items:flex-end;

    gap:14px;
}

.floating-contact .floating-toggle span{
    line-height:1;
}

/* =========================
   BUTTON
========================= */

.floating-contact .contact-btn,
.floating-contact .floating-toggle{

    width:62px;
    height:62px;

    position:relative;

    display:flex;
    align-items:center;

    overflow:hidden;

    border-radius:999px;

    text-decoration:none;
    cursor:pointer;

    transition:
        width .35s cubic-bezier(.22,1,.36,1),
        transform .35s cubic-bezier(.22,1,.36,1),
        box-shadow .35s ease,
        opacity .35s ease,
        visibility .35s ease;

    box-shadow:
        0 10px 30px rgba(0,0,0,.18),
        0 4px 10px rgba(0,0,0,.12);
}

.floating-contact .contact-btn:hover{
    width:190px;
}

/* =========================
   COLORS
========================= */

.floating-contact .contact-btn.zalo,
.floating-contact .contact-btn.messenger,
.floating-contact .contact-btn.call{
    background:#ed1c22;
}

.floating-contact .floating-toggle{
    background:#000;
}

/* =========================
   LABEL
========================= */

.floating-contact .contact-label{

    position:absolute;
    left:24px;

    color:#fff;

    font-size:15px;
    font-weight:600;

    white-space:nowrap;

    opacity:0;

    transform:translateX(-10px);

    transition:all .25s ease;

    pointer-events:none;
}

.floating-contact .contact-btn:hover .contact-label{
    opacity:1;
    transform:translateX(0);
}

/* =========================
   ICON WRAPPER
========================= */

.floating-contact .contact-icon{

    width:62px;
    height:62px;

    margin-left:auto;

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

    flex-shrink:0;

    position:relative;
    z-index:5;
}

/* =========================
   SVG
========================= */

.floating-contact .contact-icon svg,
.floating-contact .floating-toggle svg{
    fill:#fff;
}

.floating-contact .floating-toggle svg{
    width:28px;
    height:28px;
}

.floating-contact .messenger .contact-icon svg,
.floating-contact .call .contact-icon svg{
    width:28px;
    height:28px;
}

.floating-contact .zalo .contact-icon svg{
    width:34px;
    height:34px;
}

/* =========================
   OVERLAY
========================= */

.floating-contact .contact-btn::before,
.floating-contact .floating-toggle::before{

    content:"";

    position:absolute;
    inset:0;

    border-radius:inherit;

    background:rgba(255,255,255,0);

    z-index:1;
}

/* =========================
   PULSE
========================= */

.floating-contact .contact-btn::after{

    content:"";

    position:absolute;
    inset:0;

    border-radius:inherit;

    background:inherit;

    z-index:-1;

    opacity:.45;

    animation:pulse_float 2s infinite;
}

@keyframes pulse_float{

    0%{
        transform:scale(1);
        opacity:.4;
    }

    70%{
        transform:scale(1.45);
        opacity:0;
    }

    100%{
        transform:scale(1.45);
        opacity:0;
    }
}


/* =========================
   DFLIP CUSTOMIZATION
========================= */
.dflip-books {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 20px !important;
}

.df-thumb-info,
.df-hover-info {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
}

._df_thumb,
.df-thumb,
.df-book-3d,
.df-book-3d:hover,
.df-book-cover,
.df-book-cover:hover,
.df-book-page,
.df-book-page:hover {
  transform: none !important;
  transition: none !important;
  animation: none !important;
  width: unset;
  -webkit-transform-style: unset;
  -moz-transform-style: unset;
  -ms-transform-style: unset;
  transform-style: unset;
  -moz-perspective: unset;
  perspective: unset
}

.df-popup-thumb .df-book-page1,
.df-popup-thumb .df-book-page2 {
  display: none;
}

.df-popup-thumb .df-book-wrapper {
  -webkit-transform-style: unset;
  -moz-transform-style: unset;
  -ms-transform-style: unset;
  transform-style: unset;
}

.df-popup-thumb .df-book-cover {
  -webkit-transform-origin: unset;
  -moz-transform-origin: unset;
  transform-origin: unset;
  -moz-transition: unset;
  -o-transition: unset;
  -webkit-transition: unset;
  transition: unset;
  box-shadow: unset;
}

.dflip-custom-actions a:hover {
  text-decoration: underline !important;
}

.df-popup-thumb:hover .df-book-wrapper {
  transform: unset;
}

.dflip-custom-wrapper {
  text-align: center;
  margin-bottom: 30px;
}

.dflip-custom-title {
  font-weight: bold;
  font-size: 16px;
}

.dflip-custom-actions {
  margin-top: 5px;
  font-size: 15px;
}

.dflip-custom-actions a {
  text-decoration: none;
  color: #0056b3;
}

.dflip-custom-actions span {
  margin: 0 8px;
  color: #ccc;
}


/* =========================
   DFLIP CUSTOMIZATION
========================= */
.bkns-contact-form {
  max-width: 700px;
  margin: auto;
  padding: 40px;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  font-family: Arial, sans-serif;
}

.bkns-contact-form h3 {
  text-align: center;
  text-transform: uppercase;
  font-size: 150%;
}

.bkns-field-wrap {
  margin-bottom: 18px;
}

.bkns-row {
  display: flex;
  gap: 16px;
  margin-bottom: 18px;
}

.bkns-col {
  flex: 1;
}

.bkns-contact-form label {
  display: block;
  margin-bottom: 8px;
  font-weight: 600;
  color: #333;
}

.bkns-contact-form input,
.bkns-contact-form textarea {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid #ddd;
  border-radius: 8px;
  font-size: 14px;
  outline: none;
  transition: 0.3s;
  margin: 0;
}

.bkns-contact-form input:focus,
.bkns-contact-form textarea:focus {
  border-color: var(--primary-color);
  box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.15);
}

.bkns-contact-form textarea {
  min-height: 140px;
  resize: vertical;
}

.bkns-submit-wrap {
  margin-top: 24px;
}

.bkns-contact-form input[type="submit"] {
  display: inline-block;
  padding: 12px 24px;
  border: none;
  border-radius: 8px;
  background: var(--primary-color);
  color: #fff;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: 0.3s;
}

.bkns-contact-form input[type="submit"]:hover {
  background: var(--primary-color);
}

.khach-hang-gallery .box-image img{
	object-fit: contain;
	padding: 15px 0;
}


/* =========================
   MEDIA QUERIES (MIN-WIDTH - UPWARD)
========================= */
@media (min-width: 851px) {

  .floating-contact .contact-btn:hover,
  .floating-contact .floating-toggle:hover {
    transform: translateY(-5px) scale(1.06);
    box-shadow: 0 18px 35px rgba(0, 0, 0, .24), 0 8px 14px rgba(0, 0, 0, .14);
  }
}

@media (min-width: 577px) {
  .floating-contact .floating-toggle {
    display: none;
  }
}


/* =========================
   MEDIA QUERIES (MAX-WIDTH - DESCENDING)
========================= */

/* TABLET & MOBILE (<= 850px) */
@media (max-width: 850px) {
  .logo-gallery .bkns-rows {
    grid-template-columns: repeat(3, 1fr);
    gap: 15px;
  }

  .logo-gallery .bkns-col {
    padding: 12px;
  }

  .logo-gallery .bkns-col img {
    max-height: 80px;
  }

  .dflip-books {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

@media (max-width: 768px) {

    .floating-contact .contact-btn {
        width: 62px !important;
    }

    .floating-contact .contact-btn:hover {
        width: 62px !important;
    }

    .floating-contact .contact-label {
        display: none !important;
    }

}

/* MOBILE ONLY (<= 576px) */
@media (max-width: 576px) {
  .logo-gallery .bkns-rows {
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
  }

  .logo-gallery .bkns-col {
    min-height: 90px;
    padding: 10px;
  }

  .logo-gallery .bkns-col img {
    max-height: 60px;
  }

  .floating-contact .contact-btn {
    position: absolute;
    bottom: 0;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    animation: none;
    transition: transform .45s cubic-bezier(.22, 1, .36, 1), opacity .25s ease, visibility .25s ease, bottom .45s cubic-bezier(.22, 1, .36, 1);
  }

  .floating-contact .contact-btn.zalo {
    transform: translateY(50px) scale(.4);
  }

  .floating-contact .contact-btn.messenger {
    transform: translateY(30px) scale(.55);
  }

  .floating-contact .contact-btn.call {
    transform: translateY(10px) scale(.7);
  }

  .floating-contact .floating-toggle {
    display: flex;
    justify-content: center;
  }

  .floating-contact.active .contact-btn {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0) scale(1);
  }

  .floating-contact.active .contact-btn.zalo {
    bottom: 220px;
    transition-delay: .12s;
  }

  .floating-contact.active .contact-btn.messenger {
    bottom: 145px;
    transition-delay: .07s;
  }

  .floating-contact.active .contact-btn.call {
    bottom: 70px;
    transition-delay: .02s;
  }

  .floating-contact:not(.active) .contact-btn.zalo {
    transition-delay: 0s;
  }

  .floating-contact:not(.active) .contact-btn.messenger {
    transition-delay: .04s;
  }

  .floating-contact:not(.active) .contact-btn.call {
    transition-delay: .08s;
  }

  .bkns-contact-form {
    padding: 24px;
  }

  .bkns-row {
    flex-direction: column;
    gap: 18px;
  }
}

/* Ẩn SKU mặc định và Tồn kho mặc định của WooCommerce/Flatsome */
.product-info .sku_wrapper,
.product-info .stock {
    display: none !important;
}

/* Đảm bảo ô nhập số lượng luôn hiển thị rõ ràng */
.quantity input.qty {
    color: #333 !important;
    opacity: 1 !important;
    text-align: center;
    padding: 0 !important;
    max-width: 50px;
}

.bkns-product-quote-info {
	background-color: #fef2f3;
    padding: 10px 15px;
    border: 1px dashed #ed1c22;
    border-radius: 8px;
}

.bkns-product-quote-info .quote-info-item p {
    margin-bottom: unset;
}

.bkns-product-quote-info .quote-info-item strong {
	color: #424242;
}

/* =========================
   CUSTOM WOOCOMMERCE QUOTE SYSTEM (B2B)
========================= */

/* 1. Ẩn giá và tổng thu ở Mini Cart (Dropdown góc phải trên) */
.widget_shopping_cart_content .quantity .amount,
.widget_shopping_cart_content .total {
    display: none !important;
}

/* Xóa viền/khoảng trống thừa khi ẩn tổng thu */
.widget_shopping_cart_content .total {
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
}

/* 2. Ẩn giá và tạm tính trên trang Giỏ hàng (Cart) */
.woocommerce-cart table.cart th.product-price,
.woocommerce-cart table.cart td.product-price,
.woocommerce-cart table.cart th.product-subtotal,
.woocommerce-cart table.cart td.product-subtotal {
    display: none !important;
}

/* 3. Ẩn mã giảm giá (Coupon) */
.woocommerce-cart .coupon {
    display: none !important;
}

/* 4. Ẩn phần Tổng cộng giỏ hàng (Cart Totals), CHỈ GIỮ LẠI nút Tiến hành thanh toán */
.woocommerce-cart .cart-collaterals .cart_totals h2,
.woocommerce-cart .cart-collaterals .cart_totals table {
    display: none !important;
}

/* 5. Tùy chỉnh trang Thanh toán (Checkout) thành trang Yêu cầu báo giá */
/* Ẩn phần nhập mã ưu đãi (Coupon) ở Checkout */
.woocommerce-checkout .woocommerce-form-coupon-toggle,
.woocommerce-checkout .checkout_coupon,
.woocommerce-checkout .has-coupon {
    display: none !important;
}

/* Ẩn cột Tạm tính (giá của từng sản phẩm) trong bảng Đơn hàng */
.woocommerce-checkout table.shop_table th.product-total,
.woocommerce-checkout table.shop_table td.product-total {
    display: none !important;
}

/* Ẩn toàn bộ phần Tạm tính & Tổng cộng ở dưới cùng bảng Đơn hàng */
.woocommerce-checkout table.shop_table tfoot {
    display: none !important;
}

/* Custom Add to Cart Button for archive/loop products */
.bkns-custom-price-btn {
    color: #fff !important;
    text-transform: uppercase;
    font-size: 0.8em !important;
    font-weight: bold;
    padding: 6px 14px !important;
    border-radius: 4px;
    display: inline-block;
    border: none !important;
    transition: all 0.3s ease;
    text-decoration: none !important;
}

.bkns-custom-price-btn:hover {
    background-color: #ed1c22 !important;
    color: #fff !important;
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15) !important;
}

/* Taxonomy Badges for product classification */
.bkns-classification-badge {
    background-color: #f1f1f1;
    color: #333 !important;
    padding: 4px 10px;
    font-size: 0.85em;
    font-weight: bold;
    border-radius: 4px;
    border: 1px solid #ddd;
    text-decoration: none !important;
    transition: all 0.2s ease;
    display: inline-block;
}

.bkns-classification-badge:hover {
    background-color: #ed1c22;
    color: #fff !important;
    border-color: #ed1c22;
}