/* =====================================================
   TSV - COMMON
   CSS dùng chung toàn website

   File: assets/css/tsv-common.css

   Quản lý style dùng chung:
   01. Global variables
   02. Base / legacy layout
   03. Title normal
   04. Global typography Montserrat
   05. Global section title typography
   06. WooCommerce star rating
   07. Product card global style
   08. Product card price safe
   09. Product grid spacing global
   10. Global Flickity slider arrows
   11. Mobile common
   12. GLOBAL WOOCOMMERCE SIDEBAR
  
   Ghi chú tối ưu:
   - File này chỉ giữ style dùng chung toàn website
   - Style riêng trang chủ để trong tsv-home.css
   - Style trang chi tiết sản phẩm do từng Feature/Connector tự quản lý
   - Hạn chế viết CSS riêng từng trang trong file common để tránh chồng code
===================================================== */


/* =====================================================
   01. GLOBAL VARIABLES
   Biến dùng chung toàn website
===================================================== */

:root {
    /*
     * Font, text color và typography nhận diện website được khai báo tại
     * Website/Theme. Core/common chỉ giữ biến giao diện trung lập.
     */

    /* Slider arrow size */
    --tsv-slider-arrow-size: 36px;
    --tsv-slider-arrow-size-mobile: 30px;
    --tsv-slider-arrow-icon-size: 14px;
    --tsv-slider-arrow-icon-size-mobile: 12px;
    --tsv-slider-arrow-radius: 3px;
    --tsv-slider-arrow-radius-mobile: 2px;
    --tsv-slider-arrow-position: 2px;
    --tsv-slider-arrow-position-mobile: 2px;

    /* Slider arrow color */
    --tsv-slider-arrow-bg: #5f4a2a8a;
    --tsv-slider-arrow-bg-hover: #46361f;
    --tsv-slider-arrow-color: #ffffff;

    /* Overlay / lightbox controls shared by Product and SEO. */
    --tsv-overlay-backdrop-rgb: 5, 12, 24;
    --tsv-overlay-backdrop-soft: rgba(var(--tsv-overlay-backdrop-rgb), 0.68);
    --tsv-overlay-backdrop-strong: rgba(var(--tsv-overlay-backdrop-rgb), 0.92);
    --tsv-overlay-control-bg: rgba(8, 43, 99, 0.9);
    --tsv-overlay-control-color: #ffffff;
    --tsv-overlay-control-border: rgba(255, 255, 255, 0.22);
    --tsv-overlay-light-color: #082b63;
    --tsv-overlay-light-bg: #ffffff;
    --tsv-overlay-light-bg-hover: #f5f9ff;
    --tsv-overlay-light-border: rgba(8, 43, 99, 0.16);
    --tsv-overlay-radius: 5px;
    --tsv-overlay-shadow: 0 2px 7px rgba(5, 20, 45, 0.24);
    --tsv-overlay-seo-shadow: 0 2px 6px rgba(5, 20, 45, 0.22);
    --tsv-desktop-arrow-control-size: 26px;
    --tsv-desktop-arrow-icon-size: 8px;
    --tsv-desktop-action-control-size: 28px;
    --tsv-desktop-close-icon-size: 11px;
    --tsv-seo-control-size: var(--tsv-desktop-arrow-control-size);
    --tsv-seo-icon-size: var(--tsv-desktop-arrow-icon-size);
    --tsv-seo-control-edge: 1px;
}


/* =====================================================
   02. BASE / LEGACY LAYOUT
   Các style chung giữ lại từ file cũ
===================================================== */

.page-right-sidebar .left {
    padding: 0 15px 0 30px;
    border: none;
}

.woocommerce-error .message-container {
    text-align: center;
}

#login-form-popup {
    max-width: 450px !important;
    text-align: center;
    background-color: #f1f1f1;
}

.dashboard-links li {
    width: 100% !important;
}

.my-account .woocommerce,
.my-account .woocommerce p,
.my-account .account-login-inner p {
    text-align: center;
    width: 100%;
}

.my-account .account-login-inner input:not(.woocommerce-form__input-checkbox) {
    width: 300px;
}

.form-dk-dai-ly {
    background-color: #ececec;
    padding: 15px;
    box-shadow: 0 2px 5px #ccc;
    border: 1px solid #ffc5c5;
}

.form-dk-dai-ly textarea {
    min-height: 70px;
}

.form-dk-dai-ly h3,
.form-dk-dai-ly p {
    text-align: center !important;
}

.form-dk-dai-ly h3 {
    color: #ea1515;
    text-transform: uppercase;
}

.form-dk-dai-ly p {
    color: #1a80e6;
    margin-bottom: 20px;
}

.thong-tin-lien-he textarea,
.thong-tin-lien-he input:not(.wpcf7-submit) {
    background-color: transparent !important;
}

.bt-support-sp .col .col-inner {
    margin-top: 10px;
}

.your-message textarea {
    min-height: 60px;
}

.badge-circle .badge-inner {
    background-color: red;
}

.entry-header-text-top {
    padding-bottom: 0;
}

p#breadcrumbs {
    text-align: center;
}

.blog-wrapper p,
.blog-single p,
.page-wrapper p {
    text-align: justify;
}

#content .col {
    padding: 0 15px 15px;
}

.button-support {
    padding: 0 10px;
}

a#top-link {
    color: #9c9c9c;
}

.row-divided.row-reverse > .col + .col:not(.large-12) {
    border-right: 0 solid #ececec;
}

.icon-box-img svg {
    color: #1e73be;
}

.rpwwt-widget ul li {
    margin-bottom: 5px !important;
}

.dichvu-us h4 {
    font-size: 14px;
}

.ok-tip .col-inner {
    padding: 8px;
}

footer.entry-meta {
    text-align: center;
}

.dark .is-divider {
    margin: 10px auto;
}

.entry-header-text {
    text-align: center;
}

.entry-header-text .is-divider {
    margin: 10px auto;
}

.recent-posts-widget-with-thumbnails {
    display: none;
}

.section-title-container {
    margin-bottom: 1em;
}

.box-text-inner.blog-post-inner {
    text-align: center;
}

.box-blog-post .is-divider {
    margin: 5px auto;
}

.nav > li.active > a {
    background-color: #f0f5ff;
}

.page-left-sidebar .col {
    padding-bottom: 0;
}

.social-icons {
    display: block;
    text-align: center;
}

::placeholder {
    text-align: center;
    font-style: italic;
}


/* =====================================================
   03. TITLE NORMAL
   Cho tiêu đề viết đúng kiểu chữ đã nhập
===================================================== */

.tsv-title-normal,
.tsv-title-normal *,
.tsv-title-normal .uppercase,
.tsv-title-normal span {
    text-transform: none !important;
}


/* =====================================================
   04-05. TYPOGRAPHY WEBSITE
   Đã chuyển sang Website/Theme để Core/common không khóa font, màu và size
   của Tranh Shop Việt.
===================================================== */


/* =====================================================
   06. WOOCOMMERCE STAR RATING
   Tối ưu sao đánh giá toàn website

   Mục tiêu:
   - Chỉ giữ 1 block sao duy nhất
   - Sao trong card sản phẩm to vừa phải
   - Căn giữa sao trong card sản phẩm
   - Giữ sao trang chi tiết sản phẩm ổn định
===================================================== */

/* 06.1. Sao đánh giá trong card sản phẩm */
.products .star-rating,
.product-small .star-rating,
.no-rating.star-rating {
    display: block !important;
    float: none !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: relative !important;

    width: 5.35em !important;
    height: 1.3em !important;
    line-height: 1.2 !important;

    font-size: 18px !important;
    letter-spacing: 0 !important;

    margin: 10px auto 8px auto !important;
    overflow: hidden !important;
    text-align: left !important;
}

/* 06.2. Màu và kích thước sao */
.woocommerce-page .star-rating::before,
.star-rating::before,
.woocommerce-page .star-rating span::before,
.star-rating span::before {
    color: #ffba02 !important;
    opacity: 1 !important;
    text-shadow: none !important;

    font-size: inherit !important;
    line-height: 1.2 !important;
    letter-spacing: 0 !important;
}

/* 06.3. Sao chưa có đánh giá */
.star-rating.no-rating span {
    width: 0 !important;
}

/* 06.4. Sao trang chi tiết sản phẩm */
.single-product .woocommerce-product-rating,
.single-product .star-rating,
.single-product .no-rating.star-rating {
    display: block !important;
    float: none !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: relative !important;

    width: 5.35em !important;
    height: 1.3em !important;
    line-height: 1.2 !important;

    font-size: 18px !important;
    letter-spacing: 0 !important;

    margin: 6px 0 12px !important;
    overflow: hidden !important;
    text-align: left !important;
}

.single-product .woocommerce-review-link {
    display: none !important;
}

/* 06.5. Sao sản phẩm liên quan trong trang chi tiết */
.single-product .related .star-rating {
    float: none !important;
    display: block !important;
    margin: 8px auto 10px auto !important;
}

.single-product .related .box-text,
.single-product .related .box-text-inner {
    text-align: center !important;
}

/* 06.6. Mobile star rating */
@media only screen and (max-width: 768px) {
    .products .star-rating,
    .product-small .star-rating,
    .no-rating.star-rating {
        width: 5.35em !important;
        height: 1.3em !important;
        font-size: 16px !important;
        margin-top: 8px !important;
        margin-bottom: 7px !important;
    }

    .single-product .woocommerce-product-rating,
    .single-product .star-rating,
    .single-product .no-rating.star-rating {
        width: 5.35em !important;
        height: 1.3em !important;
        font-size: 16px !important;
    }
}


/* =====================================================
   07. PRODUCT CARD GLOBAL STYLE
   Card sản phẩm toàn site theo kiểu hiện đại, sạch, bo nhẹ

   Áp dụng:
   - Trang chủ
   - Trang danh mục
   - Sản phẩm liên quan
   - Sản phẩm upsell / cross-sell
===================================================== */

/* 07.1. Card sản phẩm */
.product-small .box,
.product-small.box {
    position: relative !important;
    background: #ffffff !important;
    border: none !important;
    border-radius: 18px !important;
    overflow: hidden !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08) !important;
    transition: box-shadow 0.25s ease, transform 0.25s ease !important;
}

/* 07.2. Ảnh và phần text ăn theo card cha */
.product-small .box-image,
.product-small.box .box-image,
.product-small .box-text,
.product-small.box .box-text {
    position: relative !important;
    overflow: hidden !important;
    border: none !important;
    border-radius: 0 !important;
    background: #ffffff !important;
}

/* 07.3. Ảnh sản phẩm */
.product-small .box-image img,
.product-small.box .box-image img {
    display: block !important;
    width: 100% !important;
    border: none !important;
    border-radius: 0 !important;
}

/* 07.4. Nền phần chữ đồng bộ trắng */
body .product-small .box-text.box-text-products,
body .product-small .box-text.box-text-products.text-center,
body .product-small .box-text.box-text-products.text-center.grid-style-2 {
    background: #ffffff !important;
    border: none !important;
    border-radius: 0 !important;
}

/* 07.5. Desktop hover */
@media only screen and (min-width: 769px) {
    .product-small .box:hover,
    .product-small.box:hover {
        box-shadow: 0 12px 32px rgba(0, 0, 0, 0.11) !important;
        transform: translateY(-2px) !important;
    }
}

/* 07.6. Mobile product card */
@media only screen and (max-width: 768px) {
    .product-small .box,
    .product-small.box {
        border-radius: 14px !important;
        box-shadow: 0 7px 20px rgba(0, 0, 0, 0.08) !important;
    }

    .product-small .box-text.box-text-products,
    .product-small.box .box-text.box-text-products {
        padding-left: 4px !important;
        padding-right: 4px !important;
    }

    .product-small .box-text-products .title-wrapper,
    .product-small .box-text-products .price-wrapper {
        width: 100% !important;
        max-width: 100% !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
}


/* =====================================================
   08. PRODUCT CARD PRICE SAFE
   Tối ưu giá trong card sản phẩm WooCommerce

   Mục tiêu:
   - Giá desktop rõ, gọn, không quá thô
   - Giá mobile không bị mất số
   - Giá gốc và giá bán căn giữa đẹp
   - Không đụng ảnh sản phẩm
===================================================== */

/* 08.1. Khu vực giá */
.product-small .price-wrapper {
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    text-align: center !important;
}

/* 08.2. Giá trong card */
.product-small .price {
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;

    display: flex !important;
    align-items: baseline !important;
    justify-content: center !important;
    flex-wrap: wrap !important;
    gap: 3px 6px !important;

    text-align: center !important;
    line-height: 1.25 !important;
}

/* 08.3. Giữ từng cụm giá không bị bể chữ */
.product-small .price,
.product-small .price span,
.product-small .price del,
.product-small .price ins,
.product-small .price bdi,
.product-small .price .amount,
.product-small .price .woocommerce-Price-amount {
    line-height: 1.25 !important;
    white-space: nowrap !important;
}

/* 08.4. Giá gốc */
.product-small .price del,
.product-small .price del .amount,
.product-small .price del .woocommerce-Price-amount {
    font-size: 15px !important;
    font-weight: 400 !important;
    color: #999999 !important;
    opacity: 0.7 !important;
}

/* 08.5. Giá bán / giá thường */
.product-small .price ins,
.product-small .price ins .amount,
.product-small .price ins .woocommerce-Price-amount,
.product-small .price > .amount,
.product-small .price > .woocommerce-Price-amount {
    font-size: 16px !important;
    font-weight: 600 !important;
    color: #e60000 !important;
    text-decoration: none !important;
}

/* 08.6. Mobile price */
@media only screen and (max-width: 768px) {
    .product-small .price {
        display: flex !important;
        flex-wrap: nowrap !important;
        align-items: baseline !important;
        justify-content: center !important;
        gap: 2px !important;
        max-width: 100% !important;
        overflow: visible !important;
        line-height: 1.2 !important;
        white-space: nowrap !important;
    }

    .product-small .price,
    .product-small .price span,
    .product-small .price del,
    .product-small .price ins,
    .product-small .price bdi,
    .product-small .price .amount,
    .product-small .price .woocommerce-Price-amount {
        line-height: 1.2 !important;
        white-space: nowrap !important;
    }

    .product-small .price del,
    .product-small .price del .amount,
    .product-small .price del .woocommerce-Price-amount {
        font-size: 10px !important;
        font-weight: 400 !important;
    }

    .product-small .price ins,
    .product-small .price ins .amount,
    .product-small .price ins .woocommerce-Price-amount,
    .product-small .price > .amount,
    .product-small .price > .woocommerce-Price-amount {
        font-size: 11.5px !important;
        font-weight: 700 !important;
    }
}


/* =====================================================
   09. PRODUCT GRID SPACING GLOBAL
   Khoảng cách giữa các card sản phẩm toàn website

   Ghi chú:
   - Giữ một block spacing duy nhất
   - Desktop 14px, mobile 14px
===================================================== */

/* 09.1. Desktop / tablet lớn */
body #content .products.row > .product-small.col,
body #content .shop-container .product-small.col,
body #content .category-page-row .product-small.col,
body #content .related.products .product-small.col,
body #content .upsells.products .product-small.col,
body #content .cross-sells .product-small.col,
body #content .tsv-home-product-tabs .product-small.col,
body #content .tabbed-content.tsv-home-product-tabs .product-small.col {
    padding: 0 7px 14px !important;
}

/* 09.2. Cân lại mép trái/phải của hàng sản phẩm desktop */
body #content .products.row,
body #content .shop-container .products.row,
body #content .category-page-row .products.row,
body #content .related.products .products.row,
body #content .upsells.products .products.row,
body #content .cross-sells .products.row,
body #content .tsv-home-product-tabs .tab-panels .row,
body #content .tsv-home-product-tabs .panel .row,
body #content .tabbed-content.tsv-home-product-tabs .tab-panels .row,
body #content .tabbed-content.tsv-home-product-tabs .panel .row {
    margin-left: -7px !important;
    margin-right: -7px !important;
}

/* 09.3. Mobile spacing */
@media only screen and (max-width: 768px) {
    body #content .products.row > .product-small.col,
    body #content .shop-container .product-small.col,
    body #content .category-page-row .product-small.col,
    body #content .related.products .product-small.col,
    body #content .upsells.products .product-small.col,
    body #content .cross-sells .product-small.col,
    body #content .tsv-home-product-tabs .product-small.col,
    body #content .tabbed-content.tsv-home-product-tabs .product-small.col,
    body #content .row-small > .product-small.col {
        padding: 0 6px 14px !important;
    }

    body #content .products.row,
    body #content .shop-container .products.row,
    body #content .category-page-row .products.row,
    body #content .related.products .products.row,
    body #content .upsells.products .products.row,
    body #content .cross-sells .products.row,
    body #content .tsv-home-product-tabs .tab-panels .row,
    body #content .tsv-home-product-tabs .panel .row,
    body #content .tabbed-content.tsv-home-product-tabs .tab-panels .row,
    body #content .tabbed-content.tsv-home-product-tabs .panel .row,
    body #content .row-small {
        margin-left: -6px !important;
        margin-right: -6px !important;
    }
}


/* =====================================================
   10. GLOBAL FLICKITY SLIDER ARROWS
   Mũi tên slider Flickity toàn website

   Mục tiêu:
   - Style mũi tên chung cho toàn website
   - Nền vuông tối, icon trắng, sát mép ảnh
   - Không viền trắng, không nền phụ trong icon
   - Desktop rê chuột vào slider mới hiện mũi tên
   - Mobile luôn hiện mũi tên
   - Không bị nhúc nhích khi rê chuột / chạm
===================================================== */

/* 10.1. Nút mũi tên Flickity dùng chung */
.flickity-enabled .flickity-prev-next-button {
    width: var(--tsv-slider-arrow-size) !important;
    height: var(--tsv-slider-arrow-size) !important;
    min-width: var(--tsv-slider-arrow-size) !important;
    min-height: var(--tsv-slider-arrow-size) !important;
    max-width: var(--tsv-slider-arrow-size) !important;
    max-height: var(--tsv-slider-arrow-size) !important;

    padding: 0 !important;
    margin: 0 !important;

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

    position: absolute !important;
    top: calc(50% - (var(--tsv-slider-arrow-size) / 2)) !important;

    border: 0 !important;
    outline: none !important;
    border-radius: var(--tsv-slider-arrow-radius) !important;

    background: var(--tsv-slider-arrow-bg) !important;
    color: var(--tsv-slider-arrow-color) !important;
    box-shadow: none !important;

    opacity: 1 !important;
    z-index: 30 !important;
    line-height: 1 !important;
    cursor: pointer !important;

    transform: none !important;

    transition:
        background-color 0.2s ease,
        opacity 0.16s ease,
        visibility 0s linear 0s !important;
}

/* 10.2. Vị trí mũi tên trái / phải */
.flickity-enabled .flickity-prev-next-button.previous {
    left: var(--tsv-slider-arrow-position) !important;
    right: auto !important;
}

.flickity-enabled .flickity-prev-next-button.next {
    right: var(--tsv-slider-arrow-position) !important;
    left: auto !important;
}

/* 10.3. Icon SVG bên trong nút */
.flickity-enabled .flickity-prev-next-button .flickity-button-icon,
.flickity-enabled .flickity-prev-next-button svg {
    width: var(--tsv-slider-arrow-icon-size) !important;
    height: var(--tsv-slider-arrow-icon-size) !important;

    display: block !important;
    position: static !important;

    left: auto !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;

    margin: 0 !important;
    padding: 0 !important;

    transform: none !important;
    overflow: visible !important;

    background: transparent !important;
    border: 0 !important;
    outline: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;

    fill: currentColor !important;
    color: currentColor !important;
}

/* 10.4. Nét mũi tên lấy theo màu icon */
.flickity-enabled .flickity-prev-next-button .arrow,
.flickity-enabled .flickity-button-icon .arrow {
    fill: currentColor !important;
    stroke: none !important;
    background: transparent !important;
}

/* 10.5. Focus / active / disabled */
.flickity-enabled .flickity-prev-next-button:focus,
.flickity-enabled .flickity-prev-next-button:active {
    outline: none !important;
    border: 0 !important;
    box-shadow: none !important;
    transform: none !important;
}

.flickity-enabled .flickity-prev-next-button:disabled {
    opacity: 0.35 !important;
    cursor: default !important;
    box-shadow: none !important;
}

/* 10.6. Desktop: mặc định ẩn mũi tên, rê vào slider mới hiện */
@media only screen and (min-width: 769px) {
    .flickity-enabled .flickity-prev-next-button {
        visibility: hidden !important;
        opacity: 0 !important;
        pointer-events: none !important;

        top: calc(50% - (var(--tsv-slider-arrow-size) / 2)) !important;
        transform: none !important;

        transition:
            opacity 0.16s ease,
            visibility 0s linear 0.16s,
            background-color 0.2s ease !important;
    }

    .flickity-enabled:hover .flickity-prev-next-button {
        visibility: visible !important;
        opacity: 1 !important;
        pointer-events: auto !important;

        top: calc(50% - (var(--tsv-slider-arrow-size) / 2)) !important;
        transform: none !important;

        transition:
            opacity 0.16s ease,
            visibility 0s linear 0s,
            background-color 0.2s ease !important;
    }

    .flickity-enabled:not(:hover) .flickity-prev-next-button {
        visibility: hidden !important;
        opacity: 0 !important;
        pointer-events: none !important;

        top: calc(50% - (var(--tsv-slider-arrow-size) / 2)) !important;
        transform: none !important;
    }

    .flickity-enabled:hover .flickity-prev-next-button:hover {
        background: var(--tsv-slider-arrow-bg-hover) !important;
        opacity: 1 !important;
        box-shadow: none !important;

        top: calc(50% - (var(--tsv-slider-arrow-size) / 2)) !important;
        transform: none !important;
    }

    .flickity-enabled:hover .flickity-prev-next-button:disabled {
        opacity: 0.35 !important;
        pointer-events: none !important;
        cursor: default !important;
    }
}

/* 10.7. Mobile: mũi tên nhỏ hơn và luôn hiện */
@media only screen and (max-width: 768px) {
    .flickity-enabled .flickity-prev-next-button {
        width: var(--tsv-slider-arrow-size-mobile) !important;
        height: var(--tsv-slider-arrow-size-mobile) !important;
        min-width: var(--tsv-slider-arrow-size-mobile) !important;
        min-height: var(--tsv-slider-arrow-size-mobile) !important;
        max-width: var(--tsv-slider-arrow-size-mobile) !important;
        max-height: var(--tsv-slider-arrow-size-mobile) !important;

        top: 50% !important;
        transform: translateY(-50%) !important;

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

        border: 0 !important;
        outline: none !important;
        border-radius: var(--tsv-slider-arrow-radius-mobile) !important;

        background: var(--tsv-slider-arrow-bg) !important;
        color: var(--tsv-slider-arrow-color) !important;
        box-shadow: none !important;

        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto !important;
    }

    .flickity-enabled .flickity-prev-next-button.previous {
        left: var(--tsv-slider-arrow-position-mobile) !important;
        right: auto !important;
    }

    .flickity-enabled .flickity-prev-next-button.next {
        right: var(--tsv-slider-arrow-position-mobile) !important;
        left: auto !important;
    }

    .flickity-enabled .flickity-prev-next-button .flickity-button-icon,
    .flickity-enabled .flickity-prev-next-button svg {
        width: var(--tsv-slider-arrow-icon-size-mobile) !important;
        height: var(--tsv-slider-arrow-icon-size-mobile) !important;

        background: transparent !important;
        border: 0 !important;
        outline: none !important;
        box-shadow: none !important;
        transform: none !important;
    }

    .flickity-enabled .flickity-prev-next-button:focus,
    .flickity-enabled .flickity-prev-next-button:active {
        transform: translateY(-50%) !important;
    }
}


/* =====================================================
   11. MOBILE COMMON
   Style chung cho mobile
===================================================== */

@media only screen and (max-width: 48em) {
    .form-dk-dai-ly {
        background-color: #ececec;
        padding: 15px;
    }

    .form-dk-dai-ly .col {
        text-align: center;
    }

    .form-dk-dai-ly input {
        text-align: center;
    }

    .bt-support-sp .col {
        max-width: 100%;
        flex-basis: 100%;
    }

    .bt-support-sp .col .col-inner {
        text-align: center;
        margin-top: 10px;
        font-size: 14px;
    }

    .loai-xe .small-12 {
        max-width: 50%;
        flex-basis: 50%;
    }
}





/* =====================================================
   12. GLOBAL WOOCOMMERCE SIDEBAR
   Dùng chung cho:
   - Sidebar trang danh mục sản phẩm: #shop-sidebar
   - Sidebar trang chi tiết sản phẩm: .tsv-product-tabs-sidebar

   Ghi chú:
   - Style chung đặt ở tsv-common.css
   - Layout riêng từng trang vẫn để ở file riêng
===================================================== */

/* Khung widget sidebar */
#shop-sidebar .widget,
.shop-sidebar .widget,
.single-product .tsv-product-tabs-sidebar .widget {
    overflow: hidden !important;
    margin-bottom: 18px !important;
    background: #ffffff !important;
    border: 1px solid #e4eaf2 !important;
    border-radius: 8px !important;
    box-shadow: 0 6px 18px rgba(8, 43, 99, 0.06) !important;
}

/* Khoảng đệm riêng đang dùng tại sidebar Shop. */
#shop-sidebar .widget {
    padding: 10px;
}

/* Giá trị chung cho danh sách chưa có kiểu chuyên biệt. */
#shop-sidebar .widget ul {
    padding: 0 10px !important;
    font-size: 15px !important;
}

/* Tiêu đề widget sidebar */
#shop-sidebar .widget-title,
#shop-sidebar .widgettitle,
#shop-sidebar .section-title,
#shop-sidebar .product-section-title,
.shop-sidebar .widget-title,
.shop-sidebar .widgettitle,
.shop-sidebar .section-title,
.shop-sidebar .product-section-title,
.single-product .tsv-product-tabs-sidebar .widget-title,
.single-product .tsv-product-tabs-sidebar .widgettitle,
.single-product .tsv-product-tabs-sidebar .section-title,
.single-product .tsv-product-tabs-sidebar .product-section-title {
    display: block !important;
    margin: 0 !important;
    padding: 10px 12px !important;

    background: linear-gradient(90deg, #1e7be8 0%, #0b5fc0 100%) !important;
    color: #ffffff !important;
    border-radius: 8px 8px 0 0 !important;

    font-size: 14px !important;
    font-weight: 700 !important;
    line-height: 1.25 !important;
    letter-spacing: .2px !important;
    text-align: center !important;
    text-transform: none !important;
}

/* Ẩn gạch divider mặc định */
#shop-sidebar .is-divider,
.shop-sidebar .is-divider,
.single-product .tsv-product-tabs-sidebar .is-divider {
    display: none !important;
}

/* Danh mục sản phẩm */
#shop-sidebar .product-categories,
.shop-sidebar .product-categories {
    margin: 0 !important;
    padding: 8px 10px !important;
}

#shop-sidebar .product-categories li,
.shop-sidebar .product-categories li {
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
    border-bottom: 1px solid #eef1f5 !important;
}

#shop-sidebar .product-categories li:last-child,
.shop-sidebar .product-categories li:last-child {
    border-bottom: none !important;
}

#shop-sidebar .product-categories li a,
.shop-sidebar .product-categories li a {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;

    margin: 3px 0 !important;
    padding: 9px 10px !important;

    color: #082b63 !important;
    border-radius: 7px !important;

    font-size: 14px !important;
    font-weight: 500 !important;
    line-height: 1.35 !important;
    text-decoration: none !important;
    text-transform: none !important;

    transition:
        background-color 0.18s ease,
        color 0.18s ease,
        padding-left 0.18s ease !important;
}

#shop-sidebar .product-categories li a:hover,
.shop-sidebar .product-categories li a:hover {
    background: #eef6ff !important;
    color: #1e7be8 !important;
    padding-left: 14px !important;
}

#shop-sidebar .product-categories li.current-cat > a,
.shop-sidebar .product-categories li.current-cat > a {
    background: #eaf4ff !important;
    color: #082b63 !important;
    font-weight: 700 !important;
}

#shop-sidebar .product-categories .count,
.shop-sidebar .product-categories .count {
    color: #777777 !important;
    font-size: 12px !important;
    font-weight: 400 !important;
}

/* Danh sách sản phẩm sidebar */
#shop-sidebar ul.product_list_widget,
.shop-sidebar ul.product_list_widget,
.single-product .tsv-product-tabs-sidebar ul.product_list_widget {
    margin: 0 !important;
    padding: 7px 10px 9px 10px !important;
}

/* Từng sản phẩm trong sidebar */
#shop-sidebar ul.product_list_widget li,
.shop-sidebar ul.product_list_widget li,
.single-product .tsv-product-tabs-sidebar ul.product_list_widget li {
    position: relative !important;
    display: block !important;

    min-height: 92px !important;
    margin: 0 !important;
    padding: 10px 0 !important;

    border-bottom: 1px solid #eef1f5 !important;
    overflow: hidden !important;
}

#shop-sidebar ul.product_list_widget li:last-child,
.shop-sidebar ul.product_list_widget li:last-child,
.single-product .tsv-product-tabs-sidebar ul.product_list_widget li:last-child {
    border-bottom: none !important;
}

/* Link sản phẩm */
#shop-sidebar ul.product_list_widget li > a,
.shop-sidebar ul.product_list_widget li > a,
.single-product .tsv-product-tabs-sidebar ul.product_list_widget li > a {
    display: grid !important;
    grid-template-columns: 72px minmax(0, 1fr) !important;
    column-gap: 11px !important;
    align-items: start !important;

    width: 100% !important;
    min-width: 0 !important;

    color: #082b63 !important;
    text-decoration: none !important;
    overflow: visible !important;
}

/* Ảnh sản phẩm sidebar */
#shop-sidebar ul.product_list_widget li > a img,
.shop-sidebar ul.product_list_widget li > a img,
.single-product .tsv-product-tabs-sidebar ul.product_list_widget li > a img {
    float: none !important;
    position: static !important;

    grid-column: 1 !important;
    grid-row: 1 / span 3 !important;

    width: 72px !important;
    height: 72px !important;

    margin: 0 !important;
    padding: 0 !important;

    object-fit: cover !important;
    object-position: center !important;

    border: 1px solid #edf1f6 !important;
    border-radius: 7px !important;
}

/* Tên sản phẩm */
#shop-sidebar ul.product_list_widget li > a .product-title,
.shop-sidebar ul.product_list_widget li > a .product-title,
.single-product .tsv-product-tabs-sidebar ul.product_list_widget li > a .product-title {
    grid-column: 2 !important;

    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;

    overflow: hidden !important;
    text-overflow: ellipsis !important;

    color: #082b63 !important;
    font-size: 13.5px !important;
    font-weight: 600 !important;
    line-height: 1.35 !important;

    transition: color 0.18s ease !important;
}

#shop-sidebar ul.product_list_widget li > a:hover .product-title,
.shop-sidebar ul.product_list_widget li > a:hover .product-title,
.single-product .tsv-product-tabs-sidebar ul.product_list_widget li > a:hover .product-title {
    color: #1e7be8 !important;
}

/* Giá sản phẩm */
#shop-sidebar ul.product_list_widget li .price,
.shop-sidebar ul.product_list_widget li .price,
.single-product .tsv-product-tabs-sidebar ul.product_list_widget li .price {
    display: block !important;
    margin-left: 84px !important;
    margin-top: 5px !important;
    line-height: 1.35 !important;
}

#shop-sidebar ul.product_list_widget .amount,
.shop-sidebar ul.product_list_widget .amount,
.single-product .tsv-product-tabs-sidebar ul.product_list_widget .amount {
    color: #e51f1f !important;
    font-size: 13px !important;
    font-weight: 700 !important;
}

#shop-sidebar ul.product_list_widget del,
.shop-sidebar ul.product_list_widget del,
.single-product .tsv-product-tabs-sidebar ul.product_list_widget del {
    display: inline-block !important;
    margin-right: 5px !important;
    color: #999999 !important;
    opacity: .9 !important;
}

#shop-sidebar ul.product_list_widget del .amount,
.shop-sidebar ul.product_list_widget del .amount,
.single-product .tsv-product-tabs-sidebar ul.product_list_widget del .amount {
    color: #999999 !important;
    font-size: 12px !important;
    font-weight: 400 !important;
}

#shop-sidebar ul.product_list_widget ins,
.shop-sidebar ul.product_list_widget ins,
.single-product .tsv-product-tabs-sidebar ul.product_list_widget ins {
    text-decoration: none !important;
}