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

:root {
    /*#0b1a2b*/
    /*--pri:  var(--fs-color-primary);*/
    --pri: #0c315b;
    --white: #fff;
    --second: var(--fs-color-secondary);
    --success: var(--fs-color-success);
    --base: var(--fs-color-base);
    --border: #ddd;
    --red: red;
}
button.primary,
a.zalo-consult-button{
    background: var(--pri) !important;
    border-radius: 10px;
}
button.single_add_to_cart_button{
    border-radius: 10px;
}

li.html.custom.html_topbar_left,
li.html.custom.html_topbar_right{
    position: relative;
    padding-left: 25px;

}
li.html.custom.html_topbar_right:before,li.html.custom.html_topbar_left:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    background-size: contain !important;
    width: 20px;
    height: 20px;
}
li.html.custom.html_topbar_left:before {
    background: url(/wp-content/uploads/2026/09/phone.png) no-repeat;
}
li.html.custom.html_topbar_right:before{
    background: url(/wp-content/uploads/2026/09/email-64.png) no-repeat;
}
.hero_head1 {
    color: var(--pri);
    font-weight: bold;
    padding: 10px 0;
}

.hero_head2 {
    color: var(--pri);
    font-size: 2rem;
    font-weight: bold;

}

.hero_head3 {
    color: var(--second);
    font-size: 2.5rem;
    font-weight: bold;
    margin-top: -10px;
}

.hero_text {
    color: var(--base);
}


.icon-box h5, .icon-box h6 {
    text-transform: inherit;
    color: var(--pri);
    opacity: 1 !important;
    margin: 0;
    font-size: 1rem;
}

.hero_box_data .icon-box {
    align-items: center;
}

.hero_box_data .icon-box .subtext {
    color: var(--pri);
    font-size: 0.95rem;
}

.hero_box_data .icon-box h6 {
    font-weight: normal !important;
    font-size: 1.2rem;
}

.text_pri {
    color: var(--pri);
}

.text_second {
    color: var(--second);
}

.text_white {
    color: var(--white);
}

.text_15rem {
    font-size: 1.5rem;
}

.bold {
    font-weight: bold !important;
}

/*custom*/
.kf-banner-row {
    position: relative;
    overflow: hidden;
    border-radius: 4px;
}

/* Khối navy bẻ chéo, đè lên mép ảnh để tạo lát cắt */
.kf-banner-row::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: calc(40% - 37px); /* 40% = đúng bề rộng cột ảnh, chỉnh theo layout */
    width: 120px;
    /*background: #0f2140;      !* trùng màu nền cột content *!*/
    transform: skewX(-10deg);
    z-index: 1;


    background-image: url("/wp-content/uploads/2026/09/NENXANH.png");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

}

/* Line vàng mỏng, skew giống hệt ::before */
.kf-banner-row::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: calc(40% - 37px);
    width: 13px;
    background: linear-gradient(180deg, #f3d883, #c99b2e);
    transform: skewX(-10deg);
    z-index: 2;
    height: 100%;
}

.kf-banner-col-img {
    position: relative;
    z-index: 0;
}

.kf-banner-col-content {
    position: relative;
    z-index: 2;
}

.kf-banner-col-content .col-inner {
    display: flex;
    justify-content: center;
    flex-flow: column;
    background: url("/wp-content/uploads/2026/09/NENXANH.png");
    background-position: right;
}

@media (max-width: 549px) {
    .kf-banner-row::before,
    .kf-banner-row::after {
        display: none;
    }
}

/*custom*/

.sec_vechungtoi a.button {
    max-width: 180px;
}

.row_exp .icon-box-center .icon-box-img {
    margin-bottom: 0 !important;
}

.row_exp {
    padding-right: 30px !important;
}

.row_exp .icon-box h5 {
    color: var(--second);
}

.row_exp .icon-box {
    border: 1px solid #eee;
    background: #eeeeee1c;
    border-radius: 10px;
    padding: 05px 30px;

    color: var(--white);
}

.row_exp .icon-box:hover h5 {
    color: var(--white);
}

.row_exp .icon-box:hover {
    cursor: pointer;
    background: var(--second);
    transition: all 500ms;

}

.title_has_bg .txt_bg {
    position: relative;
    overflow: hidden;
    background: var(--bg);
    padding: 60px 20px 15px;
    text-align: center;
}

/* Ảnh nền mờ (thay background-image bằng ảnh thật của bạn) */
.title_has_bg .txt_bg::before {
    content: "";
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    filter: blur(6px) brightness(1.4);
    transform: scale(1.1); /* tránh lộ viền trắng khi blur */
    z-index: 0;
}

/* Lớp phủ trắng mờ để làm dịu ảnh nền */
.title_has_bg .txt_bg::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(255, 255, 255, .75), rgba(255, 255, 255, .9));
    z-index: 1;
}

/* Chữ watermark to, mờ, nằm phía sau tiêu đề */
.title_has_bg .txt_bg .watermark {
    position: relative;
    z-index: 2;
    font-size: clamp(50px, 10vw, 110px);
    font-weight: 800;
    letter-spacing: 4px;
    color: #b78c0221;
    margin: 0;
    line-height: 1;
    user-select: none;
}

/* Tiêu đề đỏ nổi bật, đè lên watermark */
.title_has_bg .txt_bg .title {
    position: relative;
    z-index: 3;
    margin-top: -34px; /* kéo chữ đỏ chồng lên watermark */
    font-size: clamp(22px, 4vw, 34px);
    font-weight: 800;
    color: var(--accent);
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--pri);
}

.section_duan .box-push .box-text {
    background-color: var(--second) !important;
    max-width: 75% !important;
    padding: 10px 20px !important;
    border-radius: 10px !important;
}

.home .product_title {
    font-size: 2rem;
    color: var(--pri);
    font-weight: bold;
    padding-left: 30px;
    /*animation: changeColor 5s linear infinite;*/
}

.home .product_title:before {
    content: '';
    position: absolute;
    left: -10px;
    top: 8px;
    background: url(/wp-content/uploads/2026/09/fan.png);
    background-size: cover;
    width: 35px;
    height: 35px;
    animation: rotate360 2s linear infinite;
}


.product-small p.product-title a {
    color: var(--pri);
    font-size: 0.85rem;
    font-weight: bold;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 20px;
    -webkit-line-clamp: 2;
    height: 40px;
    display: -webkit-box;
    -webkit-box-orient: vertical;
}

.home_product .product-small,
.archive .products  .product-small .col-inner .product-small
{
    border: 1px solid var(--pri);
    border-radius: 10px;
    overflow: hidden;
}
.product-small .box-text{
    padding-left: 5px !important;
    padding-right: 5px !important;
}

.archive .products del {
    
}
.archive .products del {
    font-size: 0.8rem;
}

.home_product .badge-container {
    display: none !important;
}


/* ======== FOOTER ===============*/
.section_footer span {
    font-size: 0.9rem;
}

.footer_hotline span {
    display: block;
}

.footer_hotline span:first-child:before {
    content: '';
    position: absolute;
    left: -35px;
    top: 0;
    background: url(/wp-content/uploads/2026/09/phone.png) no-repeat;
    width: 30px;
    height: 30px;
    background-size: cover;
}

.footer_hotline span:first-child {
    color: var(--white);
    font-weight: bold;
    font-size: 1.2rem;
    position: relative;
}

.footer_hotline span:last-child {
    color: var(--white);
    font-size: 0.85rem;
}

.footer_email span, .footer_address span {
    position: relative;
    color: var(--white);
}

.footer_email span:before {
    content: '';
    position: absolute;
    left: -35px;
    top: 0;
    background: url(/wp-content/uploads/2026/09/email-64.png) no-repeat;
    width: 25px;
    height: 25px;
    background-size: cover;
}

.footer_address span:before {
    content: '';
    position: absolute;
    left: -35px;
    top: 0;
    background: url(/wp-content/uploads/2026/09/circle.png) no-repeat;
    width: 25px;
    height: 25px;
    background-size: cover;
}

.footer_widget_title {
    color: var(--white);
    font-weight: bold;
    margin-bottom: 0.8rem;
}

.section_footer .menu_wp_content li:hover a {
    color: var(--second) !important;
}

.section_footer a, .section_footer span {
    color: var(--white);
    font-size: 0.9rem;
}

.section_footer .menu_wp_content li a {
    color: var(--white);
}

.section_footer .menu_wp_content li {
    list-style-type: none;
    margin-left: 0;
}


/* ======== FOOTER ===============*/



/*SHOP + ARCHIVE WOO =======================*/
div#shop-sidebar ul.product-categories a:hover {
    color: var(--second);
}
div#shop-sidebar ul.product-categories a {
    color: var(--pri);
    text-transform: uppercase;
    font-weight: bold;
    font-size: 0.85rem;
    line-height: 1.1rem;
}
div#shop-sidebar {
    padding: 15px;
    box-shadow: 0 0 40px 5px rgb(0 0 0 / .05);
    border-radius: 5px;
}
aside span.widget-title:before {
    content: '';
    width: 35px;
    height: 35px;
    background: url(/wp-content/uploads/2026/09/cooler.png) no-repeat center;
    background-size: contain;
    position: absolute;
    bottom: 6px;
    left: 4px;
    animation: rotate360 2s linear infinite;
}
aside span.widget-title {

    position: relative;
    letter-spacing: 0;
    font-size: 16px;
    display: block;
    background: url(/wp-content/uploads/2026/09/widget-bg.png) no-repeat center;
    background-size: 100% 100%;
    padding: 15px;
    color: #fff;
    border-radius: 6px;
    margin-bottom: 10px;
    position: relative;
    padding-left: 50px;
}


/* Có giảm giá */
.woocommerce-page .price-wrapper:has(.price ins) .star-rating span:before,
.woocommerce-page .price-wrapper:has(.price ins) .star-rating:before,
.woocommerce-page .price-wrapper:has(.price ins) .star-rating span:after
{
    left: unset !important;
    right: 0 !important;
}

.price-wrapper:has(.price ins) .star-rating{
    width: 100% !important;
}

/* Không giảm giá */
.price-wrapper:not(:has(.price ins)) .star-rating {
}


.product-small .badge-container .badge-inner{
    background-color: transparent !important;
    color: var(--red);
}
.product-small .badge-container {
    top: unset !important;
    bottom: 33px !important;
    margin: 0 !important;

    left: 16px;
    font-size: 0.8rem;
}
.price-wrapper .price bdi,
.price-wrapper ins bdi{
    color: var(--pri);
}
.price-wrapper del bdi{
    font-size: 0.7rem;
    color: var(--base) !important;
}


.pm-category-description {
    position: relative;
    margin-bottom: 28px;
}
.pm-category-description.is-collapsed {
    max-height: 300px;
    overflow: hidden;
}
.pm-category-description.is-collapsed::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 120px;
    pointer-events: none;
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0), #fff 72%);
}
.pm-category-description.is-expanded {
    max-height: none;
    overflow: visible;
}
.pm-category-description__content {
    margin-bottom: 0;
}
.pm-category-description__toggle {
    position: absolute;
    z-index: 1;
    left: 50%;
    bottom: 8px;
    transform: translateX(-50%);
    min-width: 118px;
    min-height: 40px;
    padding: 9px 18px;
    border: 1px solid currentColor;
    border-radius: 4px;
    background: var(--white);
    color: inherit;
    font: inherit;
    font-weight: 600;
    line-height: 1.2;
    cursor: pointer;
}
.pm-category-description__toggle:hover,
.pm-category-description__toggle:focus-visible {
    background: #f7f7f7;
}
.pm-category-description__toggle:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 3px;
}
.pm-category-description.is-expanded .pm-category-description__toggle {
    position: static;
    display: block;
    margin: 18px auto 0;
    transform: none;
}

/*SHOP + ARCHIVE WOO =======================*/




/*SHORT CODE ============*/
.pm-product-subcategories {
    margin-bottom: 32px;
}
.pm-product-subcategories .pm-product-subcategories__grid {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 24px 20px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.pm-product-subcategories .pm-product-subcategories__item {
    margin: 0;
    padding: 0;
    min-width: 0;
    border: 1px solid var(--pri);
    border-radius: 10px;
    padding: 5px;
}
.pm-product-subcategories__link {
    display: block;
    text-align: center;
}
.pm-product-subcategories__image {
    display: block;
    aspect-ratio: 1 / 1;
    border-radius: 100%;
    height: 55px;
    width: auto;
    text-align: center;
    margin: 0 auto;
}
.pm-product-subcategories__image img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}
.pm-product-subcategories__link:hover img,
.pm-product-subcategories__link:focus-visible img {
    transform: scale(1.08);
}
.pm-product-subcategories__link:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 5px;
}
.pm-product-subcategories__name {
    display: block;
    margin-top: 5px;
    font-weight: 600;
    line-height: 1.4;
    overflow-wrap: anywhere;
    font-size: 0.8rem;
    color: var(--second);
}
@media (max-width: 849px) {
    .pm-product-subcategories .pm-product-subcategories__grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 20px 16px;
    }
}
@media (max-width: 549px) {
    .pm-product-subcategories .pm-product-subcategories__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}
@media (prefers-reduced-motion: reduce) {
    .pm-product-subcategories__image img {
        transition: none;
    }
}

/*SHORT CODE ============*/


aside .custom-html-widget {
    background: #eee;
    padding: 10px 5px;
    border-radius: 5px;
    position: relative;
    padding-left: 65px;

    line-height: 1.6rem;
}
.textwidget.custom-html-widget:after {
    position: absolute;
    content: '';
    width: 60px;
    height: 60px;
    background: url(https://kinfan.vn/wp-content/uploads/2026/09/fon-call.gif) no-repeat;
    background-size: cover;
    left: 0;
    top: 5px;
}



aside .custom-html-widget div:first-child{
    color:var(--second);
    font-size: 1.4rem;
    font-weight: bold;
}
aside .custom-html-widget div:last-child {
    font-size: 0.9rem;
}
a.button.zalo-consult-button img {
    width: 30px;
    margin-right: 6px;
}



/* SINGLE ================== */






.single h1.product-title {
    font-size: 1.5rem;
    color: var(--second);
}
.single .product-info .price-wrapper .price bdi{
    font-size: unset;
}
.single .product-info .price-wrapper .price ins{
    order: 0;
}
.single .product-info .price-wrapper .price del{
    order: 1;
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 0.5rem;

}
span.discount-percent {
     color: var(--red);
    font-size: 1rem;
}
.single .product-info .price-wrapper .price {
    display: flex !important;
    flex-flow: column;
    gap: 10px;
    margin-bottom: 0;
}
.single .product-info .price-wrapper .price del span.woocommerce-Price-amount.amount{
    font-size: 1rem;
    display: block;
    text-decoration: line-through;
}

.single-product form.cart .quantity {
    display: flex;
    flex-wrap: nowrap;
    align-items: stretch;
}

.single-product form.cart {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

/* Quantity */
.single-product form.cart .quantity {
    flex: 0 1 100%;
}

/* Thêm vào giỏ */
.single-product form.cart .single_add_to_cart_button {
    flex: 1;
}

/* Mua ngay */
.single-product form.cart .buy-now-button {
    flex: 1;
}

/* Zalo: bắt buộc xuống hàng + full width */
.single-product form.cart .zalo-consult-button {
    /*flex: 0 0 100%;*/
    width: 100%;
    margin: 0;
}

span.red.chuavat {
    color: var(--red);
    font-size: 0.9rem;
    font-weight: bold;
}
.product-short-description ul li {
    margin-bottom: 0;
    font-size: 0.9rem;
}
.product-short-description {
    padding-top: 5px;
}

.single div#product-sidebar.large-3 {
    flex-basis: 20%;
    max-width: 20%;
    padding-left: 15px !important;
}
.wrap_addon_btn{
    gap: 10px;
}

    /* END SINGLE ============== */

/*general =================*/
.radius-10, .radius-10 img {
    border-radius: 10px;
}

.is-divider,
p.from_the_blog_comments {
    display: none;
}

@keyframes rotate360 {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

@keyframes changeColor {
    0% {
        color: var(--pri);
    }

    33% {
        color: var(--second);
    }

    66% {
        color: var(--base); /* đỏ */
    }

    100% {
        color: var(--pri);
    }
}

/*general =================*/


@media only screen and (max-width: 48em) {
    /*************** ADD MOBILE ONLY CSS HERE  ***************/


}