/*
Theme Name: Flexinsul Jacket theme custom
Text Domain: Flexinsul Child
Domain Path: /languages
Theme URI: https://wpastra.com/
Template: astra
Author: Brainstorm Force
Author URI: https://wpastra.com/about/?utm_source=theme_preview&utm_medium=author_link&utm_campaign=astra_theme
Description: The Astra WordPress theme is lightning-fast and highly customizable. It has over 1 million downloads and the only theme in the world with 5,700+ five-star reviews! It’s ideal for professional web designers, solopreneurs, small businesses, eCommerce, membership sites and any type of website. It offers special features and templates so it works perfectly with all page builders like Spectra, Elementor, Beaver Builder, etc. Fast performance, clean code, mobile-first design and schema markup are all built-in, making the theme exceptionally SEO-friendly. It’s fully compatible with WooCommerce, SureCart and other eCommerce plugins and comes with lots of store-friendly features and templates. Astra also provides expert support for free users. A dedicated team of fully trained WordPress experts are on hand to help with every aspect of the theme. Try the live demo of Astra: https://zipwp.org/themes/astra/
Tags: custom-menu,custom-logo,entertainment,one-column,two-columns,left-sidebar,e-commerce,right-sidebar,custom-colors,editor-style,featured-images,full-width-template,microformats,post-formats,rtl-language-support,theme-options,threaded-comments,translation-ready,blog
Version: 4.10.0.1745156440
Updated: 2025-04-20 13:40:40
*/


/* Container chính */

/* ÉP PADING PHẦN GIỎ HÀNG*/
/*
body.woocommerce-cart.ast-separate-container #primary {
    padding: 20px;

}
.woocommerce-cart .site-content {

    width: 100% !important;
    max-width: 100% !important;
    padding: 0 0 !important;
    margin: 0 0 !important;

}



.woocommerce-cart .wc-block-grid__product {
    width: 90vw;
    align-items: center;
    justify-content: center;
}
*/
.ast-plain-container.ast-no-sidebar #primary {
    margin-top: 0px;
    margin-bottom: 60px;
    margin-left: 0;
    margin-right: 0;
}

/*XÓA MARGIN TRÊN CỦA TRANG*/
.ast-separate-container #primary {
    margin-top: 0;
}



@media (min-width: 993px) {
    .ast-right-sidebar #secondary {
        padding: 0 3vw;
        

    }
}

@media (max-width: 993px) {
    .ast-right-sidebar #secondary {
        padding-left: 3vw;
        padding-right: 3vw;
        padding-bottom: 3vh;
    }

    .t-news-container {

        border-right: none;
        border-bottom: 1px solid var(--t-primary-color);
    }
    .ast-separate-container #primary {
        padding-top: 0;
    }

    /*xóa padding top body mobile/tablet*/
}


.site-content .ast-container {
    width: 100% !important;
    max-width: 100vw !important;
    padding: 0 0 !important;
    margin: 0 0 !important;
    background: var(--t-light-color);
}

/* ÉP BODY %*/



.woocommerce-breadcrumb {
    display: none;
}

/*ÉP XÓA BREADCRUMB MẶC ĐỊNH CỦA WOO*/


.ast-search-icon {
    display: none !important;
}/*ÉP XÓA CÁI TÌM KIẾM MẶC ĐỊNH NGU LỢN CỦA ASTRA*/

@media (max-width: 768px) {
    .ast-logo-title-inline .site-logo-img{
        padding-right: 0.5em!important;
    }/*chỉnh lại khoảng cách logo và tiêu đề*/

    .ast-logo-title-inline .ast-site-identity {
        padding: 0;
    }/*xóa padding trên dưới phần logo*/
    .site-header-section>* {
        padding: 0 6px;
    }/*giảm bớt khoảng cách icon header*/
    .ast-separate-container #primary {
        margin-top: 0;
    }

}
/* Sticky Header cho Astra (free) */
.site-header {
    position: sticky !important;
    top: 0 !important;
    z-index: 1000 !important;
    background-color: #ffffff !important;
    /* Đổi theo màu header  */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1) !important;
}


.main-header-menu .sub-menu {

    /*  menu thả xuống */
    box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.15);

}

.main-header-menu .sub-menu a {
    color: #333 !important;
    /* menu con */
}

.main-header-menu .sub-menu a:hover {
    background-color: #e9e9e9;
    /* màu nền khi hover */
    color: #e26022 !important;
    /* màu chữ khi hover */
}

/* Sticky Header cho Astra (free) */
.site-header {
    position: sticky;
    top: 0;
    z-index: 9999;
    background-color: #ffffff;
    /* Đổi theo màu header  */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

@media (min-width: 741px) and (max-width: 922px) {

    /* CSS cho tablet */
    site-header {
        padding: 5px 0 !important;
    }
}

/*contact*/


/* --- Contact Info Block --- */
.t-contactSnippet-container {
    /* background-color: #2c2c2c; /* Dark background like footer */
    /* Đã bỏ màu nền của khối liên hệ */
    color: #ffffff;
    /* White text color */
    padding: 0.8rem 0rem;
    /* Padding */
    border-radius: 8px;
    /* Rounded corners */
    max-width: 500px;
    /* Max width for the block */
    width: 100%;
    /* Responsive width */
}

.t-contactSnippet-title {
    font-size: 1.5rem;
    /* Title font size */
    font-weight: 600;
    color: #ffffff;
    /* White title */
    margin-bottom: 1.5rem;
    /* Space below title */
    /* padding-bottom: 0.8rem; /* Space for underline */
    /* border-bottom: 2px solid #F27421; /* Orange underline */
    /*display: inline-block;*/
    /* Make underline fit content */
}

.t-contactSnippet-list {
    list-style: none;
    padding: 0;
    margin: 0;
    /* Remove default margin */
}

.t-contactSnippet-list li {
    margin-bottom: 1rem;
    /* Space between items */
    display: flex;
    align-items: flex-start;
    /* Align icon top */
    gap: 1rem;
    /* Space between icon and text */
    font-size: 1rem;
    /* Text size */
    line-height: 1.5;
    /* Line height for readability */
    color: #ffffff;
    /* Slightly lighter gray for text */
}

/* Last item no margin bottom */
.t-contactSnippet-list li:last-child {
    margin-bottom: 0;
}

/* Style cho Font Awesome icon */
.t-contactSnippet-list i {
    color: #F27421;
    /* Màu cam cho icon */
    margin-top: 0.25rem;
    /* Điều chỉnh vị trí dọc */
    width: 20px;
    /* Đảm bảo khoảng trống */
    text-align: center;
    /* Căn giữa icon */
    flex-shrink: 0;
    /* Ngăn co lại */
}



.t-contactSnippet-list a {
    color: #ffffff;
    /* White link color */
    text-decoration: none;
    transition: color 0.3s ease;
}

.t-contactSnippet-list a:hover {
    color: #F27421;
    /* Orange hover color */
    text-decoration: underline;
}

.t-contactSnippet-list strong {
    color: #ffffff;
    /* Make strong text white */
    font-weight: 500;
    /* Adjust weight if needed */
}

/* --- Responsive Adjustments --- */
@media (max-width: 576px) {
    body {
        padding: 0;
        /* Đặt padding body về 0 trên mobile */
    }

    .t-contactSnippet-container {
        padding: 1.5rem;
        /* Reduce block padding */
    }

    .t-contactSnippet-title {
        font-size: 1.3rem;
        /* Adjust title size */
    }

    .t-contactSnippet-list li {
        font-size: 0.95rem;
        /* Adjust text size */
        gap: 0.8rem;
        /* Adjust gap */
    }
}


/* TRANG CHỦ*/

/* == Global Variables & Reset == */
:root {
    --t-primary-color: #E05E1A;
    --t-primary-light: #f58b53;
    --t-primary-dark: #b34812;
    --t-secondary-color: #2C3E50;
    --t-text-color: #333333;
    --t-light-color: #ffffff;
    --t-grey-color: #f1f1f1;
    --t-grey-dark: #e0e0e0;
    --border-radius: 5px;
    --box-shadow: 0 2px 15px rgba(0, 0, 0, 0.1);
    --transition: all 0.3s ease;
    --t-container-max: 1200px;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Roboto', sans-serif;
    /* Đảm bảo font Roboto đã được chọn trong Customizer của Astra */
    color: var(--t-text-color);
    line-height: 1.6;
    overflow-x: hidden;
}

a {
    text-decoration: none;
    color: inherit;
    /* Kế thừa màu chữ từ thẻ cha */
    transition: var(--transition);
    /* Thêm transition cho link */
}

a:hover {
    color: var(--t-primary-color);
    /* Đổi màu khi hover */
}


ul {
    list-style: none;
}

img {
    max-width: 100%;
    height: auto;
    display: block;
    /* Tránh khoảng trống thừa dưới ảnh */
}

/* == Helper Classes == */
.t-container {
    width: 100%;
    max-width: var(--t-container-max);
    /* Có thể chỉnh giá trị này trong Customizer của Astra */
    margin: 0 auto;
    padding: 0 15px;
}

.t-news-container {
    width: 100%;
    max-width: var(--t-container-max);
    /* Có thể chỉnh giá trị này trong Customizer của Astra */
    margin: 0 auto;
    padding: 0 15px;

}


.t-btn {
    display: inline-block;
    padding: 12px 25px;
    background-color: var(--t-primary-color);
    color: var(--t-light-color) !important;
    /* Thêm !important để ghi đè style theme nếu cần */
    border: none;
    border-radius: var(--border-radius);
    font-weight: 500;
    cursor: pointer;
    transition: var(--transition);
    text-align: center;
    line-height: normal;
    /* Reset line-height */
}

.t-btn:hover {
    background-color: var(--t-primary-dark);
    color: var(--t-light-color) !important;
}

.t-btn-outline {
    background-color: transparent;
    border: 2px solid var(--t-primary-color);
    color: var(--t-primary-color) !important;
}

.t-btn-outline:hover {
    background-color: var(--t-primary-color);
    color: var(--t-light-color) !important;
}

.t-section {
    max-width: var(--max-width-content);
    margin: 38px auto 0 auto;
    border-radius: var(--border-radius);

    padding: 36px 28px 34px 28px;
    position: relative;
    /* For PDF, restrict scroll, show all content */
    overflow: visible;
}

.t-section-title {
    text-align: center;
    margin-bottom: 40px;
    position: relative;
}

.t-section-title h2 {
    font-size: 32px;
    font-weight: 700;
    color: var(--t-secondary-color);
    margin-bottom: 10px;
    /* Tăng khoảng cách dưới H2 */
    position: relative;
    display: inline-block;
    /* Để gạch chân vừa với chữ */
    padding-bottom: 15px;
    /* Tạo khoảng trống cho gạch chân */
}

.t-section-title h2::after {
    content: '';
    position: absolute;
    bottom: 0;
    /* Đặt gạch chân ở dưới */
    left: 50%;
    transform: translateX(-50%);
    width: 60px;
    /* Độ rộng gạch chân cố định */
    height: 3px;
    background-color: var(--t-primary-color);
}

.t-section-title p {
    color: #777;
    max-width: 700px;
    margin: 10px auto 0;
    /* Thêm khoảng cách trên */
}

/* == Header == */
/* Lưu ý: Nhiều style header có thể được cấu hình trong Astra Header Builder. */
/* CSS dưới đây dùng để tinh chỉnh thêm nếu cần. */


.t-header-top {
    background-color: var(--t-secondary-color);
    color: var(--t-light-color);
    padding: 8px 0;
    font-size: 14px;
}

.t-header-top-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.t-header-contact {
    display: flex;
    gap: 20px;
}

.t-header-contact-item {
    display: flex;
    align-items: center;
    gap: 5px;
}

.t-header-contact-item a {
    /* Style cho link trong contact */
    color: var(--t-light-color);
}

.t-header-contact-item a:hover {
    color: var(--t-primary-light);
}

.t-header-social {
    display: flex;
    gap: 15px;
}

.t-header-social a {
    /* Style cho icon social */
    color: var(--t-light-color);
    font-size: 16px;
}

.t-header-social a:hover {
    color: var(--t-primary-light);
    transform: scale(1.1);
    /* Hiệu ứng phóng to nhẹ */
}


.t-header-main {
    /* Layout này chủ yếu do Astra Header Builder quản lý */
    padding: 15px 0;
    /* Astra có thể có setting riêng */
}

.t-logo {
    /* Layout logo do Astra Header Builder quản lý */
}

.t-logo img {
    height: 50px;
    /* Có thể chỉnh trong Customizer */
}

.t-logo-text {
    /* Nếu dùng Site Title của Astra, có thể cần CSS này */
    font-size: 20px;
    font-weight: 700;
    color: var(--t-primary-color);
    margin-left: 10px;
    /* Khoảng cách với logo */
}

/* Style cho Menu Navigation chính */
/* Astra có nhiều tùy chọn trong Customizer > Header > Primary Menu */
.main-navigation .main-header-menu .menu-item {
    position: relative;
    padding: 0px 0;
    /*font-size: 1.2em;*/
    font-weight: 600;
    transition: var(--transition);
}

.t-mobile-menu-btn {
    /* Nút mobile menu do Astra quản lý, có thể không cần class này */
    display: none;
    /* Sẽ được hiển thị bởi JS/CSS của Astra ở màn hình nhỏ */
}


/*--------- style Banner mới ----------------*/


.t-banner-container {
    position: relative;
    width: 100%;
    height: 500px;
    max-height: 500px;
    overflow: hidden;
    opacity: 0;
    animation: fadeIn 1s forwards;
    max-width: var(--t-container-max);
}

.t-banner-background {
    position: absolute;
    width: 100%;
    height: 100%;
    max-height: 600px;
    background-size: 200% 200%;
    background-position: 0% 50%;
    z-index: 0;
    animation: bgAnimation 15s infinite alternate, bgScaleIn 1.5s forwards;
    overflow: hidden;
    filter: grayscale(0.6);
}
.t-banner-background-img
{
    min-width: 100vw;
    max-height: 600px;
    object-fit:cover;
    filter: blur(5px);
    transform: scale(1.05);
    z-index: 0;
}

.t-banner-content {
    position: relative;
    width: 100%;
    height: 100%;
    max-width: var(--t-container-max);
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 40px;
    z-index: 2;
    padding-top: 20px;
}

.t-slogan-container {
    width: 50%;
    color:var(--t-light-color);
    transform: translateX(-50px);
    opacity: 0;
    animation: slideIn 1s forwards 0.5s;
}

.t-slogan-container h1 {
    color: var(--t-light-color);
    font-size: 42px;
    margin-bottom: 20px;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
    transform: translateY(20px);
    opacity: 0;
    animation: textSlideUp 0.8s forwards 1s;
}

.t-slogan-container p {
    font-size: 18px;
    margin-bottom: 30px;
    line-height: 1.6;
    transform: translateY(20px);
    opacity: 0;
    animation: textSlideUp 0.8s forwards 1.2s;
}

.tt-cta-button {
    display: inline-block;
    padding: 12px 30px;
    background-color: #ff6b6b;
    color: white;
    text-decoration: none;
    font-weight: bold;
    border-radius: 30px;
    transition: all 0.3s ease;
    box-shadow: 0 5px 15px rgba(255, 107, 107, 0.4);
    transform: scale(0.8);
    opacity: 0;
    animation: buttonPopIn 0.6s forwards 1.5s;
}

.tt-cta-button:hover {
    background-color: #ff5252;
    transform: translateY(-3px) scale(1);
    box-shadow: 0 8px 20px rgba(255, 107, 107, 0.6);
}

.t-products-container {
    width: 45%;
    position: relative;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.t-product-image {
    position: absolute;
    max-width: 400px;
    filter: drop-shadow(0 10px 15px rgba(0, 0, 0, 0.9));
    transition: all 0.5s ease;
    opacity: 0;
}

.t-product-1 {
    top: 50%;
    left: 50%;
    transform: translate(-80%, -50%) scale(0.7);
    animation: floatProduct1 6s ease-in-out infinite, productSlideIn 1s forwards 0.8s;
    z-index: 3;
}

.t-product-2 {
    top: 50%;
    left: 50%;
    transform: translate(-20%, -45%) scale(0.6);
    animation: floatProduct2 7s ease-in-out infinite 1s, productSlideIn 1s forwards 1s;
    z-index: 2;
}
.t-banner-buttons .t-btn {
    /* Style riêng cho nút trong banner nếu cần */
    margin-right: 15px;
    margin-bottom: 10px;
    /* Cho nút xuống dòng trên mobile */
}

.t-banner-buttons .t-btn:last-child {
    margin-right: 0;
}

/* Animations */
@keyframes fadeIn {
    to {
        opacity: 1;
    }
}

@keyframes bgScaleIn {
    0% {
        transform: scale(1.1);
        opacity: 0;
    }

    100% {
        transform: scale(1);
        opacity: 1;
    }
}

@keyframes bgAnimation {
    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }
}

@keyframes slideIn {
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes textSlideUp {
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

@keyframes buttonPopIn {
    0% {
        transform: scale(0.8);
        opacity: 0;
    }

    70% {
        transform: scale(1.1);
        opacity: 1;
    }

    100% {
        transform: scale(1);
        opacity: 1;
    }
}

@keyframes productSlideIn {
    to {
        opacity: 1;
    }
}

@keyframes floatProduct1 {

    0%,
    100% {
        transform: translate(-60%, -50%) rotate(-5deg);
    }

    50% {
        transform: translate(-60%, -55%) rotate(5deg);
    }
}

@keyframes floatProduct2 {

    0%,
    100% {
        transform: translate(-40%, -45%) rotate(5deg);
    }

    50% {
        transform: translate(-40%, -50%) rotate(-5deg);
    }
}

/* Responsive */
@media (max-width: 768px) {
    .t-banner-background
    {
        max-height: 600px;
    }
    .t-banner-background-img {
            position: relative;
            transform: scale(4);
            max-height: 1000px;
    
        }
    .t-banner-content {
        flex-direction: column;
        padding: 40px 20px 0px 20px;
        text-align: center;
    }

    .t-slogan-container {
        width: 100%;
        margin-bottom: 30px;
    }

    .t-products-container {
        width: 100%;
        height: 200px;
    }
    
    .t-product-image {
        max-width: 70%;
    }

    .t-product-1 {
        animation: floatProduct1Mobile 6s ease-in-out infinite, productSlideIn 1s forwards 0.8s;
    }

    .t-product-2 {
        animation: floatProduct2Mobile 7s ease-in-out infinite 1s, productSlideIn 1s forwards 1s;
    }

    @keyframes floatProduct1Mobile {

        0%,
        100% {
            transform: translate(-70%, -50%) rotate(-5deg);
        }

        50% {
            transform: translate(-70%, -55%) rotate(5deg);
        }
    }

    @keyframes floatProduct2Mobile {

        0%,
        100% {
            transform: translate(-30%, -45%) rotate(5deg);
        }

        50% {
            transform: translate(-30%, -50%) rotate(-5deg);
        }
    }
}

/*---------kết thúc style Banner mới ----------------*/



/* ==========================================================================
   CSS MỚI CHO DANH MỤC SẢN PHẨM MINIMALIST (Thêm vào cuối style.css)
   ========================================================================== */
.t-category-bg {
    background-color: var(--t-grey-color);
}

.t-category-grid-minimal {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 30px;
}

.t-category-item-minimal {
    display: block;
    text-align: center;
    justify-content: center;
    color: var(--t-text-color);
    text-decoration: none;
    padding: 15px;
    border-radius: 5px;
    background: var(--t-light-color);
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
    margin: 0 auto;
    width: 100%;
    height: 100%;
}

.t-category-item-minimal:hover {
    transform: translateY(-5px);
    /* Dùng biến màu light */
    box-shadow: var(--box-shadow);
    /* Dùng biến shadow */
    transform: translateY(-5px);
    transition: var(--transition);

}

.t-category-image-wrapper-minimal {
    width: 120px;
    height: 120px;
    border-radius: 1%;
    overflow: hidden;
    margin: 0 auto;
    margin-bottom: 15px;
    /*box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);*/
    transition: var(--transition);

    /* Dùng biến màu light */
    position: relative;
    background-color: var(--t-grey-color);
    /* Dùng biến màu grey */
    border-bottom:1px solid var(--t-grey-color);
}

.t-category-item-minimal:hover .t-category-image-wrapper-minimal {
    transform: scale(1.03);
    transition: var(--transition);


}

.t-category-image-wrapper-minimal img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: var(--transition);
}

.t-category-item-minimal:hover .t-category-image-wrapper-minimal img {
    transform: scale(1.1);
}

.t-category-name-minimal {
    font-size: 16px;
    font-weight: 600;
    color: var(--t-secondary-color);
    /* Dùng biến màu secondary */
    line-height: 1.4;
    transition: var(--transition);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.t-category-item-minimal:hover .t-category-name-minimal {
    color: var(--t-primary-color);
    /* Dùng biến màu primary */
}

/* Responsive adjustments for new categories */
@media (max-width: 768px) {
    .t-category-image-wrapper-minimal {
        width: 90%;
        height: auto;
        margin-bottom: 15px;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .t-category-name-minimal {
        font-size: 15px;
    }

    .t-category-grid-minimal {
        gap: 20px;
        grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    }
    .t-category-item-minimal {
        margin: 0 auto;
        width: 100%;
        height: 100%;
    }
}

@media (max-width: 480px) {
    .t-category-image-wrapper-minimal {
        width: 90%;
        height: auto;
    }

    .t-category-name-minimal {
        font-size: 14px;
    }

    .t-category-grid-minimal {
        gap: 15px;
        grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
    }
    .t-category-item-minimal {
        margin: 0 auto;
        width: 100%;
        height: 100%;
    }
}

/* ==========================================================================
   Kết thúc CSS cho Danh mục Sản phẩm Minimalist
   ========================================================================== */

/* == Products == */
.t-products-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    /* Hoặc dùng class của WC/Astra nếu có */
    gap: 30px;
}

/* Style cho card sản phẩm (có thể cần ghi đè style của WooCommerce/Astra) */
.woocommerce ul.products li.product .t-product-card,
/* Target nếu dùng cấu trúc WC */
.t-product-card {
    /* Target cấu trúc HTML tùy chỉnh */
    background-color: var(--t-light-color);
    border-radius: var(--border-radius);
    overflow: hidden;
    box-shadow: var(--box-shadow);
    transition: var(--transition);
    display: flex;
    flex-direction: column;
    text-align: left;
    /* Reset text-align */
    margin-bottom: 0;
    /* Reset margin của WC */
    padding: 0;
    /* Reset padding của WC */
    position: relative;
}

.woocommerce ul.products li.product:hover .t-product-card,
.t-product-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

.t-product-img {
    width: 100%;
    height: auto;
    /* bỏ ép cứng chiều cao */
    background-color: #eee;
    overflow: hidden;
    position: relative;
}

.t-product-img a {
    display: block;
    width: 100%;
    height: auto;
    /* để thả theo ảnh */
}

.t-product-img img {
    width: 100%;
    height: auto;
    /* quan trọng */
    object-fit: contain;
    /* hoặc bỏ hẳn object-fit */
    display: block;
}

.t-product-card:hover .t-product-img img {
    transform: scale(1.05);
}

/* Style cho badge (Sale flash của WC hoặc class tùy chỉnh) */
.woocommerce span.onsale,
/* Badge của WC */
.t-product-badge {
    /* Class tùy chỉnh */
    position: absolute;
    top: 15px;
    right: 15px;
    background-color: var(--t-primary-color);
    color: var(--t-light-color);
    padding: 5px 10px;
    border-radius: var(--border-radius);
    font-size: 12px;
    font-weight: 500;
    z-index: 9;
    line-height: 1;
    /* Reset line-height */
}

.t-product-info {
    padding: 20px;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

.t-product-title {
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 10px;
    color: var(--t-secondary-color);
}

.t-product-title a {
    color: var(--t-secondary-color);
    text-decoration: none !important;
}

.t-product-title a:hover {
    color: var(--t-primary-color);
}


.t-product-desc {
    font-size: 14px;
    color: #777;
    margin-bottom: 15px;
    flex-grow: 1;
    /* Đẩy action xuống dưới */
}

.t-product-actions {
    display: grid;
    /* <<< ĐỔI SANG GRID */
    grid-template-columns: 1fr auto;
    /* Cột 1 (giá) chiếm hết phần thừa, Cột 2 (nút) rộng vừa đủ nội dung */
    gap: 10px;
    /* Khoảng cách giữa giá và nút */
    align-items: end;
    /* <<< CĂN CẢ 2 ITEM XUỐNG DƯỚI CÙNG CỦA HÀNG GRID */
    margin-top: auto;
    /* Vẫn giữ để đẩy cả khối action xuống dưới */
    padding-top: 15px;
    /* Thêm padding top để tách khỏi description nếu cần */
    border-top: 1px solid var(--t-grey-color);
    /* Thêm đường kẻ nếu muốn */
}

/* Có thể cần reset lại min-height cho giá nếu đã thêm ở bước trước */
.t-product-actions .price {
    min-height: unset;
    /* Bỏ min-height nếu đã đặt trước đó */
    display: block;
    /* Đảm bảo giá hiển thị tốt trong grid cell */
    /* Các style khác cho giá giữ nguyên */
    color: var(--t-primary-color);
    font-size: 18px;
    font-weight: bold;
    line-height: 1.4;
}

.t-product-actions .price ins {
    /* Giá sau giảm */
    text-decoration: none;
}

.t-product-actions .price del {
    /* Giá gốc */
    font-size: 0.8em;
    color: #999;
    margin-left: 5px;
}


/* Style nút Add to cart của WC nếu dùng */
.t-product-actions .button.add_to_cart_button,
.t-product-actions .button.added_to_cart,
.t-product-actions .button.product_type_grouped {
    padding: 10px 15px !important;
    /* Ghi đè padding */
    background-color: var(--t-primary-color) !important;
    color: var(--t-light-color) !important;
    border-radius: var(--border-radius) !important;
    font-weight: 500 !important;
    line-height: normal !important;
    transition: var(--transition) !important;
    margin-left: 10px;
    text-decoration: none !important;
    /* Khoảng cách với giá */
}

.t-product-actions .button.add_to_cart_button:hover,
.t-product-actions .button.added_to_cart:hover {
    background-color: var(--t-primary-dark) !important;
    color: var(--t-light-color) !important;

}

.t-product-actions .added_to_cart {
    /* Style nút View Cart */
    display: none;
    background-color: white !important;
    /* Đổi nền thành trắng */
    padding: 10px 15px !important;
    /* Ghi đè padding */
    color: var(--t-primary-color) !important;

    border: 1px solid var(--t-primary-color) !important;
    /* Thêm viền 1px màu vàng */
    border-radius: var(--border-radius) !important;
    font-weight: 500 !important;
    line-height: normal !important;
    transition: var(--transition) !important;
    /* Khoảng cách với giá */
}

.woocommerce ul.products:not(.elementor-grid),
.woocommerce-page ul.products:not(.elementor-grid) {
    /* grid-template-columns: repeat(4, 1fr); */
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    /* Điều chỉnh minmax nếu cần */
    gap: 30px;
}

/* == Why Choose Us == */
.t-why-us {
    background-color: var(--t-grey-color);
}

.t-features-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 30px;
}

.t-feature-card {
    background-color: var(--t-light-color);
    border-radius: var(--border-radius);
    padding: 30px;
    text-align: center;
    box-shadow: var(--box-shadow);
    transition: var(--transition);
}

.t-feature-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

.t-feature-icon {
    font-size: 40px;
    /* Cần Bootstrap Icons được load */
    color: var(--t-primary-color);
    margin-bottom: 20px;
    line-height: 1;
    /* Đảm bảo icon không quá cao */
}

.t-feature-title {
    font-size: 20px;
    font-weight: 600;
    margin-bottom: 15px;
    color: var(--t-secondary-color);
}

.t-feature-desc {
    font-size: 15px;
    color: #777;
    line-height: 1.7;
    /* Tăng khoảng cách dòng */
}

/* == News == */
.t-news-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    /* Điều chỉnh minmax nếu cần */
    gap: 30px;
}

.t-news-card {
    background-color: var(--t-light-color);
    border-radius: var(--border-radius);
    overflow: hidden;
    box-shadow: var(--box-shadow);
    transition: var(--transition);
    display: flex;
    flex-direction: column;
}

.t-news-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

.t-news-img {
    height: 200px;
    overflow: hidden;
    background-color: #eee;
}

.t-news-img a {
    display: block;
    height: 100%;
}

.t-news-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: var(--transition);
}

.t-news-card:hover .t-news-img img {
    transform: scale(1.05);
}

.t-news-info {
    padding: 20px;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

.t-news-date {
    font-size: 14px;
    color: #777;
    margin-bottom: 10px;
}

.t-news-title {
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 10px;
    color: var(--t-secondary-color);
    line-height: 1.4;
}

.t-news-title a {
    color: var(--t-secondary-color);
}

.t-news-title a:hover {
    color: var(--t-primary-color);
}

.t-news-excerpt {
    font-size: 14px;
    color: #777;
    margin-bottom: 15px;
    flex-grow: 1;
    line-height: 1.6;
}

.t-news-excerpt p {
    /* Style đoạn excerpt nếu có thẻ p */
    margin-bottom: 0;
}


.t-news-info .t-btn {
    /* Nút đọc tiếp */
    margin-top: auto;
    /* Đẩy xuống dưới */
    align-self: flex-start;
    /* Chỉ rộng bằng nội dung nút */
}


/* == Clients == */
.t-clients {
    background-color: var(--t-grey-color);
}

.t-clients-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 40px;
    align-items: center;
}

.t-client-logo {
    height: 60px;
    /* Giảm chiều cao logo */
    width: auto;
    /* Để chiều rộng tự động */
    max-width: 150px;
    /* Giới hạn chiều rộng */
    filter: grayscale(15%);
    opacity: 0.7;
    transition: var(--transition);
}

.t-client-logo:hover {
    filter: grayscale(0);
    opacity: 1;
    transform: scale(1.05);
}

/* == CTA Section == */
.t-cta {
    background-color: var(--t-primary-color);
    color: var(--t-light-color);
    text-align: center;
    padding: 60px 0;
    z-index: 1;
}

.t-cta-title {
    font-size: 36px;
    font-weight: 700;
    margin-bottom: 20px;
    color: var(--t-light-color);
    /* Đảm bảo màu chữ */
}

.t-cta-text {
    font-size: 18px;
    max-width: 700px;
    margin: 0 auto 30px;
    line-height: 1.7;
}

.t-btn-light {
    background-color: var(--t-light-color);
    color: var(--t-primary-color) !important;
}

.t-btn-light:hover {
    background-color: var(--t-grey-dark);
    color: var(--t-primary-dark) !important;
}

/* == Footer == */
/* Lưu ý: Nhiều style footer có thể được cấu hình trong Astra Footer Builder. */
/* CSS dưới đây dùng để tinh chỉnh thêm nếu cần. */
.t-footer {
    /* Màu nền và chữ có thể chỉnh trong Customizer > Footer Builder */
    /* background-color: var(--t-secondary-color); */
    /* color: var(--t-light-color); */
    padding: 60px 0 0;
    /* Chỉ padding top, bottom sẽ do bottom bar xử lý */
}

.t-footer-grid {
    /* Layout cột do Astra Footer Builder quản lý */
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 40px;
    margin-bottom: 40px;
}

.t-footer-col {
    /* Style chung cho các cột footer widget */
    color: var(--t-light-color);
    /* Đặt màu chữ mặc định */
}

.t-footer-col a:not(.social-icon-anchor) {
    /* Link trong widget footer */
    color: #ccc;
    /* Màu nhạt hơn */
}

.t-footer-col a:not(.social-icon-anchor):hover {
    color: var(--t-primary-light);
    padding-left: 5px;
    /* Hiệu ứng thụt vào khi hover */
}


.t-footer-logo img {
    height: 60px;
    /* Có thể chỉnh trong Footer Builder element */
    margin-bottom: 20px;
}

.t-footer-about p {
    /* Text trong widget about */
    margin-bottom: 20px;
    line-height: 1.7;
    color: #ccc;
    /* Màu nhạt hơn */
}

.t-footer-about .t-header-social a {
    /* Social icon trong widget about */
    color: #ccc;
}

.t-footer-about .t-header-social a:hover {
    color: var(--t-primary-light);
}

.t-footer-title {
    /* Astra dùng .widget-title hoặc tương tự */
    font-size: 20px;
    font-weight: 600;
    margin-bottom: 20px;
    position: relative;
    padding-bottom: 10px;
    color: var(--t-light-color);
    /* Đảm bảo màu chữ */
}

.t-footer-title::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 50px;
    height: 2px;
    background-color: var(--t-primary-color);
}

.t-footer-links ul {
    /* List trong widget menu */
    padding: 0;
}

.t-footer-links li {
    margin-bottom: 12px;
    transition: var(--transition);
}

/* Hiệu ứng hover đã xử lý ở .t-footer-col a */


.t-footer-contact-item {
    display: flex;
    margin-bottom: 15px;
    align-items: flex-start;
    /* Căn icon và text theo top */
    color: #ccc;
    /* Màu nhạt hơn */
}

.t-footer-contact-icon {
    margin-right: 10px;
    color: var(--t-primary-color);
    padding-top: 3px;
    /* Căn icon xuống 1 chút */
    font-size: 18px;
    /* Tăng kích thước icon */
}

.t-footer-contact-item a {
    /* Link email/tel */
    color: #ccc;
}

.t-footer-contact-item a:hover {
    color: var(--t-primary-light);
    padding-left: 0;
    /* Bỏ hiệu ứng thụt vào cho link contact */
}

.t-footer-bottom {
    /* Astra có Footer Bar riêng, có thể cấu hình trong Customizer */
    /* background-color: rgba(0, 0, 0, 0.2); */
    /* padding: 20px 0; */
    /* text-align: center; */
    /* font-size: 14px; */
    /* color: #ccc; */
    /* Màu chữ */
}

.t-footer-bottom p {
    /* Đảm bảo margin cho text copyright */
    margin-bottom: 0;
}


/* == Responsive Styles == */
@media (max-width: 992px) {
    .t-banner {
        min-height: 500px;
        /* Giảm chiều cao banner */
    }

    .t-banner-title {
        font-size: 36px;
    }

    .t-section {
        padding: 40px 0;
    }

    .t-cta-title {
        font-size: 32px;
    }
}

@media (max-width: 768px) {

    /* Header responsive do Astra xử lý qua Off-Canvas Menu */
    .t-header-top-content {
        flex-direction: column;
        gap: 10px;
    }

    .t-header-contact {
        flex-direction: column;
        gap: 10px;
        align-items: center;
        text-align: center;
        /* Căn giữa text */
    }

    .t-banner {
        min-height: 450px;
    }

    .t-banner-title {
        font-size: 30px;
    }

    .t-section-title h2 {
        font-size: 28px;
    }

    .t-cta-title {
        font-size: 28px;
    }

    .t-footer-grid {
        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
        /* Giữ nguyên hoặc chuyển thành 1 cột */
        gap: 30px;
        /* Giảm gap */
    }

    .t-footer-col {
        /* Căn giữa nội dung cột footer trên mobile nếu cần */
        /* text-align: center; */
    }

    .t-footer-title::after {
        /* Căn giữa gạch chân */
        /* left: 50%; */
        /* transform: translateX(-50%); */
    }

    .t-footer-contact-item {
        /* justify-content: center; */
        /* Căn giữa item contact */
    }
}

@media (max-width: 576px) {
    body {
        font-size: 15px;
        /* Giảm font chữ cơ bản */
    }

    .t-banner {
        min-height: 400px;
    }

    .t-banner-title {
        font-size: 26px;
    }

    .t-banner-text {
        font-size: 16px;
    }

    .t-section {
        padding: 30px 0;
    }

    .t-section-title h2 {
        font-size: 24px;
    }

    .t-section-title h2::after {
        width: 50px;
        /* Giảm chiều rộng gạch chân */
    }

    .t-btn {
        /* Giảm padding nút */
        padding: 10px 20px;
        z-index: 10;
    }

    .t-cta-title {
        font-size: 24px;
    }

    .t-cta-text {
        font-size: 16px;
    }

    .t-footer-grid {
        grid-template-columns: 1fr;
        /* Chuyển thành 1 cột */
        gap: 25px;
    }

    .t-footer-col {
        margin-bottom: 20px;
        /* Thêm khoảng cách giữa các widget */
    }

    .t-footer-col:last-child {
        margin-bottom: 0;
    }

    /* Điều chỉnh thêm cho card sản phẩm/tin tức nếu cần trên mobile */
    .t-products-grid,
    .t-news-grid,
    .t-categories-list,
    .t-features-grid {
        grid-template-columns: 1fr;
        /* 1 cột trên mobile */
    }
}

/* CSS làm bản đồ trang Liên hệ (ID: 64) full-width */
.page-id-64 .t-contact-map-section {
    max-width: 100%;
    /* Ghi đè max-width mặc định nếu có */
    width: 100vw;
    /* Chiếm 100% chiều rộng viewport */
    margin-left: 50%;
    transform: translateX(-50%);
    /* Căn giữa section khi nó rộng hơn container */
    padding-left: 0;
    padding-right: 0;
    overflow: hidden;
    /* Tránh scroll ngang nếu có lỗi nhỏ */
}

/* Đảm bảo iframe chiếm hết section mới */
.page-id-64 .t-contact-map-section iframe {
    display: block;
    /* Bỏ khoảng trống dưới iframe */
    width: 100%;
    /* Luôn rộng 100% section cha */
    height: 450px;
    /* Giữ chiều cao mong muốn */
}

/* Điều chỉnh cho màn hình nhỏ nếu cần */
@media (max-width: 768px) {
    .page-id-64 .t-contact-map-section iframe {
        height: 350px;
        /* Chiều cao nhỏ hơn trên mobile */
    }
}

@media (max-width: 480px) {
    .page-id-64 .t-contact-map-section iframe {
        height: 300px;
        /* Chiều cao nhỏ hơn nữa */
    }
}


/* ==========================================================================
   CSS CHO TRANG KẾT QUẢ TÌM KIẾM (search.php)
   ========================================================================== */
.search-results .page-title {
    /* Style tiêu đề trang kết quả */
    text-align: center;
    margin-bottom: 30px;
    font-size: 28px;
    color: var(--t-secondary-color);
}

.search-results .page-title .search-term {
    /* Style từ khóa tìm kiếm */
    color: var(--t-primary-color);
    font-style: italic;
}

.t-search-results-grid {
    /* Grid chứa kết quả */
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    /* Grid tương tự trang tin tức/sản phẩm */
    gap: 30px;
}

/* Style cho card mặc định (kết quả là Trang) */
.t-default-result-card {
    grid-column: 1 / -1;
    /* Cho chiếm hết chiều rộng grid */
    background: var(--t-light-color);
    border-radius: var(--border-radius);
    box-shadow: var(--box-shadow);
    padding: 20px 25px;
    margin-bottom: 20px;
    /* Khoảng cách giữa các kết quả dạng trang */
}

.t-default-result-card .entry-title a {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--t-secondary-color);
}

.t-default-result-card .entry-title a:hover {
    color: var(--t-primary-color);
}

.t-default-result-card .entry-summary {
    font-size: 0.95rem;
    color: #666;
    margin-top: 8px;
}


/* Responsive */
@media (max-width: 768px) {
    .search-results .page-title {
        font-size: 24px;
    }

    .t-search-results-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    /* 1 cột trên mobile */
}

/* ==========================================================================
   Kết thúc CSS trang kết quả tìm kiếm
   ========================================================================== */
/* ==========================================================================
   CSS CHO TRANG KẾT QUẢ TÌM KIẾM (search.php)
   ========================================================================== */
.search-results .page-title {
    /* Style tiêu đề trang kết quả */
    text-align: center;
    margin-bottom: 30px;
    font-size: 28px;
    color: var(--t-secondary-color);
}

.search-results .page-title .search-term {
    /* Style từ khóa tìm kiếm */
    color: var(--t-primary-color);
    font-style: italic;
}

.t-search-results-grid {
    /* Grid chứa kết quả */
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    /* Grid tương tự trang tin tức/sản phẩm */
    gap: 30px;
}

/* Style cho card mặc định (kết quả là Trang) */
.t-default-result-card {
    grid-column: 1 / -1;
    /* Cho chiếm hết chiều rộng grid */
    background: var(--t-light-color);
    border-radius: var(--border-radius);
    box-shadow: var(--box-shadow);
    padding: 20px 25px;
    margin-bottom: 20px;
    /* Khoảng cách giữa các kết quả dạng trang */
}

.t-default-result-card .entry-title a {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--t-secondary-color);
}

.t-default-result-card .entry-title a:hover {
    color: var(--t-primary-color);
}

.t-default-result-card .entry-summary {
    font-size: 0.95rem;
    color: #666;
    margin-top: 8px;
}


/* Responsive */
@media (max-width: 768px) {
    .search-results .page-title {
        font-size: 24px;
    }

    .t-search-results-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    /* 1 cột trên mobile */
}

/* ==========================================================================
   CSS BỔ SUNG CHO TRANG KẾT QUẢ TÌM KIẾM (search.php)
   ========================================================================== */

/* Style cho tiêu đề của từng section kết quả (Sản phẩm, Tin tức, Trang) */
.search-results-section {
    margin-bottom: 40px;
    /* Khoảng cách giữa các section */
    padding-bottom: 30px;
    border-bottom: 1px solid var(--t-grey-dark);
}

.search-results-section:last-of-type {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: none;
}

.search-results-section-title {
    font-size: 24px;
    font-weight: 600;
    color: var(--t-secondary-color);
    margin-bottom: 25px;
    padding-bottom: 10px;
    border-bottom: 2px solid var(--t-primary-color);
    display: inline-block;
    /* Chỉ rộng bằng nội dung */
}

/* Grid cho Sản phẩm và Tin tức (Đã có .t-products-grid và .t-news-grid) */
/* Chỉ cần đảm bảo chúng hoạt động tốt trong section này */

/* Style cho danh sách kết quả Trang */
.t-page-results-list {
    /* Có thể để dạng danh sách mặc định hoặc thêm style */
}

.t-page-results-list .t-default-result-card {
    grid-column: auto;
    /* Bỏ grid-column nếu không muốn nó full width */
    background: var(--t-light-color);
    border-radius: var(--border-radius);
    box-shadow: var(--box-shadow);
    padding: 20px 25px;
    margin-bottom: 15px;
    /* Khoảng cách giữa các kết quả dạng trang */
    border-left: 4px solid var(--t-primary-light);
    /* Thêm viền trái màu nhấn */
}

.t-page-results-list .t-default-result-card .entry-title a {
    font-size: 1.05rem;
    /* Chỉnh size */
    font-weight: 600;
    color: var(--t-secondary-color);
    text-decoration: none;
}

.t-page-results-list .t-default-result-card .entry-title a:hover {
    color: var(--t-primary-color);
}

.t-page-results-list .t-default-result-card .entry-summary {
    font-size: 0.9rem;
    /* Chỉnh size */
    color: #666;
    margin-top: 5px;
}

.t-page-results-list .t-default-result-card .entry-summary p {
    margin-bottom: 0;
    /* Bỏ margin của thẻ p trong excerpt */
}

/* Bỏ phân trang mặc định nếu dùng multiple queries */
.search-results .t-shop-pagination,
.search-results .navigation.pagination {
    display: none;
    /* Ẩn phân trang cũ đi */
}

/* ==========================================================================
   Kết thúc CSS trang kết quả tìm kiếm
   ========================================================================== */

/* Bố cục giỏ hàng responsive sử dụng grid */
.t-cart-wrapper {
    display: grid;
    grid-template-columns: 1fr;
    grid-gap: 30px;
    width: 100%;
}

/* Phần sản phẩm */
.t-cart-products {
    grid-column: 1;
    grid-row: 1;
}

/* Phần tổng cộng giỏ hàng */
.t-cart-totals {
    grid-column: 1;
    grid-row: 2;
}

/* Responsive cho màn hình desktop */
@media (min-width: 768px) {
    .t-cart-wrapper {
        grid-template-columns: 7fr 3fr;
    }

    .t-cart-products {
        grid-column: 1;
        grid-row: 1;
    }

    .t-cart-totals {
        grid-column: 2;
        grid-row: 1;
    }
}

/* Đảm bảo phần cross-sells (sản phẩm bán kèm) nằm dưới totals */
.cross-sells {
    width: 100%;
    clear: both;
    margin-top: 30px;
}

/* Đảm bảo bảng totals đầy đủ chiều rộng */
.cart_totals {
    width: 100% !important;
}