/*
Theme Name: Hello Elementor Child
Theme URI: https://elementor.com/hello-theme/?utm_source=wp-themes&utm_campaign=theme-uri&utm_medium=wp-dash
Template: hello-elementor
Author: Elementor Team
Author URI: https://elementor.com/?utm_source=wp-themes&utm_campaign=author-uri&utm_medium=wp-dash
Description: Hello Elementor is a lightweight and minimalist WordPress theme that was built specifically to work seamlessly with the Elementor site builder plugin. The theme is free, open-source, and designed for users who want a flexible, easy-to-use, and customizable website. The theme, which is optimized for performance, provides a solid foundation for users to build their own unique designs using the Elementor drag-and-drop site builder. Its simplicity and flexibility make it a great choice for both beginners and experienced Web Creators.
Tags: accessibility-ready,flexible-header,custom-colors,custom-menu,custom-logo,featured-images,rtl-language-support,threaded-comments,translation-ready
Version: 3.5.1.1788942207
Updated: 2026-09-09 08:23:27

*/

.tab-menu .menu-item a:hover, .tab-menu .current-menu-item a {
	font-weight: 700 !important;
}
.item-post .title a {
	transition: all .3s ease;
}
.item-post:hover .title a{
	color: #00361e !important;
}

.woocommerce-breadcrumb,
.woocommerce-breadcrumb p,
.bbdt-breadcrumb {
    margin: 0 !important;
}

.bbdt-breadcrumb {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    font-size: inherit;
    font-family: inherit;
    line-height: normal;
}

.bbdt-breadcrumb a {
    color: inherit;
    text-decoration: none;
    transition: color 0.2s ease;
}

.bbdt-breadcrumb a:hover {
    color: #37973c;
    text-decoration: underline;
}

.bbdt-breadcrumb .breadcrumb-delimiter {
    opacity: 0.6;
    user-select: none;
}

.bbdt-breadcrumb .breadcrumb-current {
    font-weight: 600;
}

.inline-text * {
    font-size: inherit;
    font-family: inherit;
    font-weight: inherit;
    padding: 0;
    margin: 0;
    display: inline;
}


.mau-cam {
    color: #FF7A00;
}


.background-image {
    width: 100%;
    height: 100%;
    z-index: -4 !important;
}

.background-image img {
    width: 100%;
    height: 100% !important;
    object-fit: cover;
    object-position: center;
}




.border-bottom-gradient-button {
    position: relative;
}

.border-bottom-gradient-button::before {
    content: "";
    position: absolute;
    height: 2px;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(270deg, rgba(255, 255, 255, 0) 0%, #A55206 100%);
    display: inline-block;
}






.full-height-image,
.full-height-image img {
    height: 100%;
}

.ratio_4-3__image img {
    aspect-ratio: 4/3;
    object-fit: cover;
}

.ratio_16-9__image img {
    aspect-ratio: 16/9;
    object-fit: cover;
}







.limit-3-columns--product-title .elementor-heading-title>a {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
    height: 4.2em;
}

.limit-2-columns-title,
.limit-2-columns-title .elementor-heading-title {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    height: 2.8em;
}

.limit-2-columns-excrept,
.limit-2-columns-excrept p {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    height: 2.8em;
}




.hn_item-product .limit-3-columns--product-title a, .hn_item-product .btn-hover a {
	transition: all .3s ease;
}
.hn_item-product:hover .limit-3-columns--product-title a {
	color: #007a17 !important;
}
.hn_item-product:hover .btn-hover a  {
	background-color: #ff7a00 !important;
	color: #fff !important;
}





/* Popup mobile */
.menu-in-mobile .current-menu-item {
    border-bottom-width: 0px;
}

.menu-in-mobile .current-menu-item a,
.menu-in-mobile .menu-item a:hover {
    border: 1px solid #FF7A00 !important;
    border-radius: 100px !important;
}






/* Form hỗ trợ báo giá */
.contact-form-wrapper {
    width: 100%;
    margin: 0 auto;
    font-family: "Inter", sans-serif;
    font-size: 14px;
}

.contact-form-wrapper>p {
    margin-bottom: 1.5em;
}

.contact-form-wrapper br {
    display: none;
}

.contact-form-wrapper .form-label {
    display: flex;
    align-items: center;
    gap: 0.5em;
    font-weight: 600;
    font-size: 0.9375em;
    color: #1a1a1a;
    margin-bottom: 0.75em;
    margin-top: 1.25em;
}

.contact-form-wrapper .form-label:first-child {
    margin-top: 0;
}

.contact-form-wrapper .form-label .icon {
    display: inline-flex;
    flex-shrink: 0;
    width: 1.5em;
    height: 1.5em;
}

.contact-form-wrapper .form-label .icon svg {
    width: 100%;
    height: 100%;
}

.contact-form-wrapper .form-label .required {
    color: #e53935;
}

/* Style chung cho input + textarea */
.contact-form-wrapper input[type="text"],
.contact-form-wrapper input[type="tel"],
.contact-form-wrapper textarea {
    width: 100%;
    height: 3.125em;
    /* Chiều cao chuẩn 1 ô input (~43.75px) */
    padding: 0.875em 1em;
    border: 0.09375em solid #d0d0d0;
    border-radius: 0.625em;
    font-size: 0.9375em;
    font-family: inherit;
    color: #333;
    background: #fff;
    transition: border-color 0.2s;
    box-sizing: border-box;
    line-height: 1.4;
}

.contact-form-wrapper input:focus,
.contact-form-wrapper textarea:focus {
    outline: none;
    border-color: #2E7D32;
}

/* Class dùng chung cho 2 trường cao gấp 2 lần ô input tiêu chuẩn */
.contact-form-wrapper .form-double-height {
    height: 6.25em !important;
    /* 3.125em * 2 = 6.25em */
}

.contact-form-wrapper textarea.form-double-height {
    resize: none;
}

/* Custom trường Upload File dạng khung chọn */
.contact-form-wrapper .custom-file-upload {
    position: relative;
    width: 100%;
    border: 0.09375em solid #d0d0d0;
    border-radius: 0.625em;
    background-color: #fff;
    box-sizing: border-box;
    transition: border-color 0.2s;
    overflow: hidden;
}

.contact-form-wrapper .custom-file-upload:hover {
    border-color: #2E7D32;
}

/* Ép thẻ input file phủ kín khung */
.contact-form-wrapper .custom-file-upload input[type="file"] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
    z-index: 2;
}

/* Nội dung hiển thị bên trong khung Upload (Icon + Text) */
.contact-form-wrapper .upload-placeholder {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.5em;
    pointer-events: none;
    z-index: 1;
}

/* Icon upload 32x32 SVG mã hóa SVG thành background-image */
.contact-form-wrapper .upload-icon {
    width: 2em;
    height: 2em;
    background-image: url("data:image/svg+xml,%3Csvg width='32' height='32' viewBox='0 0 32 32' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M16 4V20M9.33333 10.6667L16 4L22.6667 10.6667M28 20V25.3333C28 26.0406 27.719 26.7189 27.219 27.219C26.7189 27.719 26.0406 28 25.3333 28H6.66667C5.95942 28 5.28115 27.719 4.78105 27.219C4.28095 26.7189 4 26.0406 4 25.3333V20' stroke='%232E7D32' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}

.contact-form-wrapper .upload-text {
    font-size: 0.875em;
    color: #8BAC8D;
    text-align: center;
}

.contact-form-wrapper .custom-file-upload .upload-placeholder>p {
    margin: 0;
}

/* Submit button */
.contact-form-wrapper .submit-wrapper {
    margin-top: 1.75em;
    position: relative;
}

.contact-form-wrapper .btn-submit,
.contact-form-wrapper input.wpcf7-submit {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 0.625em;
    width: 100%;
    padding: 1em 1.5em !important;
    padding-right: 3.2em !important;
    background-color: #FF7A00 !important;
    color: #fff !important;
    border: none !important;
    border-radius: 0.75em !important;
    font-size: 1em !important;
    font-weight: 600 !important;
    cursor: pointer;
    transition: background-color 0.2s, transform 0.1s;
    position: relative;
    background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M22.0003 12C22.0003 12.0948 21.9734 12.1875 21.9227 12.2675C21.872 12.3476 21.7996 12.4115 21.714 12.452L3.71402 20.952C3.62412 20.9956 3.52318 21.0112 3.42434 20.9966C3.32549 20.9821 3.2333 20.9381 3.15974 20.8705C3.08619 20.8029 3.03468 20.7147 3.0119 20.6174C2.98913 20.5202 2.99614 20.4183 3.03202 20.325L5.87402 12.698C6.0417 12.2478 6.0417 11.7523 5.87402 11.302L3.03102 3.67504C2.99495 3.58168 2.98785 3.47962 3.01064 3.38216C3.03343 3.28471 3.08505 3.19638 3.15878 3.1287C3.23251 3.06102 3.32492 3.01712 3.42396 3.00273C3.523 2.98834 3.62409 3.00413 3.71402 3.04804L21.714 11.548C21.7996 11.5885 21.872 11.6525 21.9227 11.7325C21.9734 11.8126 22.0003 11.9053 22.0003 12ZM22.0003 12H6.00002' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 1.3em center !important;
    background-size: 1.25em !important;
}

.contact-form-wrapper .btn-submit:hover,
.contact-form-wrapper input.wpcf7-submit:hover {
    background-color: #e66e00 !important;
}

.contact-form-wrapper .wpcf7-spinner {
    position: absolute;
    top: 100%;
    left: 0;
}

/* Cho span của CF7 phủ kín khung upload */
.contact-form-wrapper .custom-file-upload .wpcf7-form-control-wrap {
    position: absolute !important;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    z-index: 2;
    display: block;
}

/* Input file phủ kín span */
.contact-form-wrapper .custom-file-upload input[type="file"] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
    z-index: 3;
    margin: 0;
    padding: 0;
    font-size: 0;
    /* tránh text mặc định của browser */
}

/* Giữ placeholder nằm dưới input */
.contact-form-wrapper .custom-file-upload .upload-placeholder {
    z-index: 1;
    pointer-events: none;
}
@media (min-width: 2400px) {
	.contact-form-wrapper {

    font-size: 17px;
}
}








/* ==========================================================
   BỘ LỌC SẢN PHẨM - ĐƠN VỊ EM DÙNG RESPONSIVE CO GIÃN ĐỀU
   ========================================================== */

.bbdt__filter-wrapper {
    /* Đặt font-size gốc chuẩn là 16px (1em = 16px) */
    font-size: 16px;
    width: 100%;
    max-width: 20em;
    /* ~ 320px */
    font-family: "Inter";
    color: #444;
    box-sizing: border-box;
}

/* 1. Từng nhóm lọc */
.bbdt__filter-group {
    margin-bottom: 1.25em;
    /* ~ 24px */
}

/* 2. Tiêu đề mục lọc */
.bbdt__filter-title {
    font-size: 0.875em;
    font-weight: 600;
    color: #388e3c;
    margin: 0 0 0.5em 0;
    padding-bottom: 0.5em;
    border-bottom: 0.0625em solid #a5d6a7;
}

/* 3. Danh sách Checkbox */
.bbdt__filter-list {
    display: flex;
    flex-direction: column;
    gap: 0.75em;
    /* ~ 12px */
    padding-top: 0.375em;
}

/* Khối tóm tắt trạng thái lọc đang kích hoạt */
.bbdt__active-filters-summary {
    background: #fff8f2;
    border: 0.0625em solid #ffd8b8;
    border-radius: 0.5em;
    padding: 0.625em 0.875em;
    margin-bottom: 1.25em;
}

.bbdt__active-filters-title {
    display: block;
    font-size: 0.8em;
    font-weight: 600;
    color: #d85b00;
    margin-bottom: 0.5em;
}

.bbdt__active-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375em;
}

.bbdt__active-tag {
    display: inline-flex;
    align-items: center;
    background: #ff7300;
    color: #fff;
    font-size: 0.75em;
    padding: 0.25em 0.65em;
    border-radius: 1em;
    font-weight: 500;
    line-height: 1.2;
}

/* 4. Nhãn chứa Checkbox */
.bbdt__checkbox-label {
    display: flex;
    align-items: center;
    position: relative;
    cursor: pointer;
    font-size: 0.9em;
    color: #585858;
    user-select: none;
}

.bbdt__checkbox-label input[type="checkbox"] {
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    width: 1.375em;
    height: 1.375em;
    margin: 0;
    padding: 0;
    opacity: 0.001;
    cursor: pointer;
    z-index: 2;
    display: inline-block;
    appearance: none;
    -webkit-appearance: none;
}

/* 5. Custom Checkbox */
.bbdt__custom-checkbox {
    width: 1.375em;
    height: 1.375em;
    border: 0.0625em solid #585858;
    border-radius: 0.275em;
    margin-right: 0.75em;
    display: inline-block;
    position: relative;
    background-color: #fff;
    flex-shrink: 0;
    transition: all 0.2s ease;
    pointer-events: none;
}

/* Dynamic Checkmark */
.bbdt__checkbox-label input[type="checkbox"]:checked+.bbdt__custom-checkbox {
    background-color: #ff7300;
    border-color: #ff7300;
}

.bbdt__checkbox-label input[type="checkbox"]:checked+.bbdt__custom-checkbox::after {
    content: "";
    position: absolute;
    left: 0.4375em;
    top: 0.1875em;
    width: 0.3125em;
    height: 0.625em;
    border: solid #fff;
    border-width: 0 0.125em 0.125em 0;
    transform: rotate(45deg);
}

/* 6. Văn bản nhãn */
.bbdt__label-text {
    line-height: 1.3;
}

/* 7. Khu vực Nút Bấm */
.bbdt__filter-actions {
    display: flex;
    flex-direction: column;
    gap: 0.75em;
    margin-top: 0.625em;
}

/* Nút Lọc sản phẩm */
.bbdt__btn-submit {
    width: 100%;
    background-color: #ff7300;
    color: #fff;
    border: none;
    padding: 0.85em 0;
    font-size: 0.9em;
    font-weight: 500;
    border-radius: 0.5em;
    cursor: pointer;
    transition: background-color 0.2s ease;
    text-align: center;
}

.bbdt__btn-submit:hover {
    background-color: #e66800;
}

/* Nút Xóa lọc */
.bbdt__btn-reset {
    width: 100%;
    background-color: #fff;
    color: #ff7300;
    border: 0.0625em solid #ff7300;
    padding: 0.85em 0;
    font-size: 0.9em;
    font-weight: 500;
    border-radius: 0.5em;
    text-decoration: none;
    text-align: center;
    display: block;
    box-sizing: border-box;
    transition: all 0.2s ease;
}

.bbdt__btn-reset:hover {
    background-color: #fff5ed;
    color: #e66800;
    border-color: #e66800;
}

/* ==========================================================
   MEDIA QUERIES RESPONSIVE - CO GIÃN ĐỀU CHỈ BẰNG FONT-SIZE
   ========================================================== */
@media (min-width: 2400px) {
    .bbdt__filter-wrapper {
        font-size: 20px;
    }
}

/* Tablet & Màn hình vừa */
@media (max-width: 1024px) {
    .bbdt__filter-wrapper {
        font-size: 15px;
        /* Tự động co nhỏ toàn bộ UI 6.25% */
    }
}

/* Mobile */
@media (max-width: 768px) {
    .bbdt__filter-wrapper {
        font-size: 15px;
        /* Tự động co nhỏ toàn bộ UI 12.5% */
        max-width: 100%;
        /* Mở rộng full chiều ngang trên mobile */
    }
}


/* ==========================================================
   NÚT BỘ LỌC POPUP & MODAL FILTER [button_popup_filter]
   (Thiết kế chuẩn Figma Node: 86-359 - Chiều dài full 100%)
   ========================================================== */

/* Nút bấm mở Popup bộ lọc theo Figma: 100% width, border #e35300, radius 8px, font Roboto 18px */
.bbdt__btn-popup-filter {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 18px 24px;
    min-height: 59px;
    background-color: #ffffff;
    color: #e35300;
    border: 1px solid #e35300;
    border-radius: 8px;
    font-family: "Roboto", sans-serif;
    font-size: 18px;
    font-weight: 500;
    line-height: normal;
    letter-spacing: 0.5px;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.2s ease-in-out;
    user-select: none;
    box-sizing: border-box;
}

.bbdt__btn-popup-filter:hover {
    background-color: #fff6f0;
    border-color: #e35300;
    color: #e35300;
}

/* Trạng thái khi có ít nhất 1 bộ lọc đang hoạt động */
.bbdt__btn-popup-filter.bbdt__has-filter {
    background-color: #fff2e8;
    border-color: #e35300;
    color: #e35300;
    font-weight: 600;
}

/* Icon bộ lọc */
.bbdt__btn-popup-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    color: #e35300;
    flex-shrink: 0;
}

.bbdt__btn-popup-icon svg {
    display: block;
    width: 20px;
    height: 20px;
}

/* Chữ nhãn nút */
.bbdt__btn-popup-text {
    font-family: "Roboto", sans-serif;
    font-size: 18px;
    font-weight: 500;
    letter-spacing: 0.5px;
    color: #e35300;
    white-space: nowrap;
    word-break: break-word;
}

/* Badge hiển thị số lượng bộ lọc đang được kích hoạt */
.bbdt__btn-popup-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 24px;
    height: 24px;
    padding: 0 7px;
    background-color: #e35300;
    color: #ffffff;
    font-family: "Roboto", sans-serif;
    font-size: 13px;
    font-weight: 700;
    border-radius: 12px;
    line-height: 1;
    margin-left: 4px;
    box-shadow: 0 2px 6px rgba(227, 83, 0, 0.3);
    transition: all 0.2s ease;
    flex-shrink: 0;
}

.bbdt__btn-popup-filter:hover .bbdt__btn-popup-badge {
    background-color: #c94900;
}

/* Responsive trên màn hình di động */
@media (max-width: 768px) {
    .bbdt__btn-popup-filter {
        padding: 14px 18px;
        min-height: 50px;
        font-size: 16px;
    }

    .bbdt__btn-popup-text {
        font-size: 16px;
    }
}

/* ==========================================================
   MODAL POPUP BỘ LỌC (HỖ TRỢ ELEMENTOR TEMPLATE SHORTCODE)
   ========================================================== */

.bbdt__popup-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 999999;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.25s ease, visibility 0.25s ease;
    padding: 16px;
    box-sizing: border-box;
}

.bbdt__popup-modal.is-open {
    opacity: 1;
    visibility: visible;
}

/* Lớp nền mờ */
.bbdt__popup-backdrop {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
    cursor: pointer;
}

/* Khung nội dung Popup */
.bbdt__popup-dialog {
    position: relative;
    background: #ffffff;
    border-radius: 12px;
    max-width: 440px;
    width: 100%;
    max-height: 90vh;
    overflow-y: auto;
    padding: 28px 20px 20px;
    box-shadow: 0 10px 35px rgba(0, 0, 0, 0.25);
    transform: translateY(20px) scale(0.97);
    transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
    z-index: 1;
    box-sizing: border-box;
}

.bbdt__popup-modal.is-open .bbdt__popup-dialog {
    transform: translateY(0) scale(1);
}

/* Nút đóng Popup X */
.bbdt__popup-close {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 32px;
    height: 32px;
    background: #f5f5f5;
    border: none;
    border-radius: 50%;
    font-size: 22px;
    line-height: 1;
    color: #666666;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
    z-index: 2;
    padding: 0;
}

.bbdt__popup-close:hover {
    background: #ff7300;
    color: #ffffff;
}

.bbdt__popup-body {
    width: 100%;
}

.bbdt__popup-body .bbdt__filter-wrapper {
    max-width: 100%;
    margin: 0 auto;
}

/* Khóa cuộn trang khi mở Popup */
body.bbdt-popup-is-active {
    overflow: hidden;
}









/* Container bao ngoài nút chia sẻ */
.bbdt__share-wrapper {
    position: relative;
    display: inline-block;
    font-size: 14px;
    /* Base font-size chuẩn (1em = 16px) */
}

/* Nút Chia sẻ kích thước chuẩn Figma 117px x 40px (~ 7.3125em x 2.5em) */
.bbdt__share-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5em;
    /* 8px */
    width: 7.3125em;
    /* 117px */
    height: 2.5em;
    /* 40px */
    background-color: #FF7A0033;
    /* Màu nền #FF7A00 với độ trong suốt 20% (33 hex) */
    border: none;
    border-radius: 0.5em;
    /* 8px */
    cursor: pointer;
    padding: 0 0.75em;
    transition: background-color 0.2s ease-in-out;
    box-sizing: border-box;
}

.bbdt__share-btn:hover {
    background-color: #FF7A004D;
    /* Đậm hơn một chút khi hover */
}

/* Icon SVG */
.bbdt__share-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.25em;
    /* 20px */
    height: 1.25em;
    /* 20px */
}

.bbdt__share-icon svg {
    width: 100%;
    height: 100%;
}

/* Chữ "Chia sẻ" */
.bbdt__share-text {
    font-size: 1em;
    /* 16px */
    font-weight: 500;
    color: #000000;
    line-height: 1;
    font-family: "Inter";
}

/* Notification Toast hiển thị thông báo đã sao chép link */
.bbdt__share-toast {
    position: absolute;
    bottom: 120%;
    left: 50%;
    transform: translateX(-50%) translateY(0.5em);
    background-color: #333333;
    color: #ffffff;
    padding: 0.375em 0.75em;
    font-size: 0.75em;
    border-radius: 0.25em;
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    transition: all 0.2s ease;
    pointer-events: none;
    z-index: 10;
}

.bbdt__share-toast--active {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}

/* Responsive theo kích thước màn hình */
@media (max-width: 768px) {
    .bbdt__share-wrapper {
        font-size: 15px;
        /* Tự động co nhỏ nút đều đặn trên mobile */
    }
}













/* Container bao ngoài chuẩn đơn vị em */
.bbdt__marquee-wrapper {
    font-size: 16px;
    /* Base font-size chuẩn (1em = 16px) */
    width: 100%;
    overflow: hidden;
    position: relative;
    padding: 1em 0;
    user-select: none;
}

.bbdt__marquee-track {
    display: flex;
    width: max-content;
    gap: 2em;
    /* Khoảng cách giữa 2 nhóm cuộn */
}

.bbdt__marquee-group {
    display: flex;
    align-items: center;
    justify-content: space-around;
    gap: 2em;
    /* Khoảng cách giữa các logo (~32px) */
    flex-shrink: 0;
    animation: bbdtMarqueeScroll 30s linear infinite;
}

/* Rê chuột vào sẽ tạm dừng cuộn */
.bbdt__marquee-wrapper:hover .bbdt__marquee-group {
    animation-play-state: paused;
}

.bbdt__marquee-item {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 4em;
    /* Chiều cao hiển thị logo ~64px */
    padding: 0.5em 1em;
}

/* Logo hiển thị màu gốc chuẩn */
.bbdt__marquee-item img {
    max-height: 100%;
    width: auto;
    object-fit: contain;
    filter: none;
    /* Hiển thị màu nguyên bản 100% */
    opacity: 1;
    /* Độ rõ nét tối đa */
    transition: transform 0.3s ease;
}

/* Hiệu ứng phóng to nhẹ khi hover */
.bbdt__marquee-item:hover img {
    transform: scale(1.08);
}

/* Keyframe cuộn vô tận mượt mà */
@keyframes bbdtMarqueeScroll {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(calc(-100% - 2em));
    }
}

@media (max-width: 768px) {
    .bbdt__marquee-wrapper {
        font-size: 14px;
        /* Co nhỏ tỉ lệ hiển thị trên Mobile */
    }

    .bbdt__marquee-group {
        animation-duration: 20s;
    }
}









/* ============================== */
/* START - NỘI DUNG BÀI VIẾT */
/* ============================= */
:where(.hn__single-post) h1,
:where(.hn__single-post) h2,
:where(.hn__single-post) h3,
:where(.hn__single-post) h4,
:where(.hn__single-post) h5,
:where(.hn__single-post) h6 {
    color: #000000;
    display: block;
    font-weight: 700;
}

:where(.hn__single-post) p,
:where(.hn__single-post) ul {
    margin-bottom: 16px;
    display: block;
}

:where(.hn__single-post) h1 {
    font-size: 2em;
    margin-top: 0.67em;
    margin-bottom: 0.67em;
}

:where(.hn__single-post) h2 {
    font-size: 1.5em;
    margin-top: 0.83em;
    margin-bottom: 0.83em;
}

:where(.hn__single-post) h3 {
    font-size: 1.17em;
    margin-top: 1em;
    margin-bottom: 1em;
}

:where(.hn__single-post) h4 {
    font-size: 1em;
    margin-top: 1.33em;
    margin-bottom: 1.33em;
}

:where(.hn__single-post) h5 {
    font-size: .83em;
    margin-top: 1.67em;
    margin-bottom: 1.67em;
}

:where(.hn__single-post) h6 {
    font-size: .67em;
    margin-top: 2.33em;
    margin-bottom: 2.33em;
}

/* ============================== */
/* END - NỘI DUNG BÀI VIẾT */
/* ============================= */

/* ==========================================================================
   SHORTCODE [search_product_tai_cho] - THANH TÌM KIẾM TẠI CHỖ
   Chuẩn thiết kế Figma Node 280:1772 - Quy chuẩn 100% đơn vị 'em' Responsive
   ========================================================================== */
.bbdt-search-tai-cho {
    font-size: 16px;
    /* Base 1em = 16px. Responsive chỉ cần đổi font-size ở đây */
    width: 100%;
    box-sizing: border-box;
    background-color: #f1f1f1;
    border-radius: 3.125em;
    /* 50px */
    padding: 0.875em 1.5em;
    /* 14px 24px */
    transition: all 0.25s ease;
    border: 0.09375em solid transparent;
    position: relative;
}

.bbdt-search-tai-cho *,
.bbdt-search-tai-cho *::before,
.bbdt-search-tai-cho *::after {
    box-sizing: border-box;
}

.bbdt-search-tai-cho:hover {
    background-color: #ebebeb;
}

.bbdt-search-tai-cho:focus-within {
    background-color: #ffffff;
    border-color: rgba(202, 74, 0, 0.45);
    box-shadow: 0 0 0 0.1875em rgba(202, 74, 0, 0.15), 0 0.25em 1em rgba(0, 0, 0, 0.04);
}

.bbdt-search-tai-cho__form {
    display: flex;
    align-items: center;
    width: 100%;
    gap: 0.75em;
    /* 12px */
    margin: 0;
    padding: 0;
    position: relative;
}

.bbdt-search-tai-cho__input {
    flex: 1;
    min-width: 0;
    border: none !important;
    outline: none !important;
    background: transparent !important;
    padding: 0 !important;
    margin: 0 !important;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
    font-size: 1em !important;
    /* 16px */
    line-height: 1.5em !important;
    /* 24px */
    font-weight: 400 !important;
    color: #1a1a1a !important;
    box-shadow: none !important;
}

.bbdt-search-tai-cho__input::placeholder {
    color: #7a7a7a !important;
    font-weight: 400 !important;
    opacity: 1 !important;
}

/* Nút xóa nhanh từ khóa (×) */
.bbdt-search-tai-cho__clear {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.375em;
    height: 1.375em;
    padding: 0;
    margin: 0;
    border: none;
    border-radius: 50%;
    background: transparent;
    color: #888888;
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: all 0.2s ease;
    flex-shrink: 0;
}

.bbdt-search-tai-cho__clear svg {
    width: 1.125em;
    height: 1.125em;
    display: block;
}

.bbdt-search-tai-cho.has-value .bbdt-search-tai-cho__clear {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.bbdt-search-tai-cho__clear:hover {
    color: #CA4A00;
    background: rgba(0, 0, 0, 0.06);
    transform: scale(1.08);
}

/* Nút Submit / Icon Kính lúp cam */
.bbdt-search-tai-cho__submit {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.5em;
    /* 24px */
    height: 1.5em;
    /* 24px */
    padding: 0;
    margin: 0;
    border: none;
    background: transparent;
    cursor: pointer;
    position: relative;
    flex-shrink: 0;
}

.bbdt-search-tai-cho__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.5em;
    height: 1.5em;
    transition: opacity 0.2s ease, transform 0.2s ease;
}

.bbdt-search-tai-cho__icon svg {
    width: 1.5em;
    height: 1.5em;
    display: block;
}

.bbdt-search-tai-cho__submit:hover .bbdt-search-tai-cho__icon svg {
    transform: scale(1.12);
}

/* Hiệu ứng loading spinner xoay tại chỗ */
.bbdt-search-tai-cho__spinner {
    display: none;
    width: 1.5em;
    height: 1.5em;
    position: absolute;
    inset: 0;
    align-items: center;
    justify-content: center;
}

.bbdt-search-tai-cho__spinner svg {
    width: 100%;
    height: 100%;
    animation: bbdtSearchSpin 0.75s linear infinite;
}

.bbdt-search-tai-cho.is-loading .bbdt-search-tai-cho__icon {
    opacity: 0;
    visibility: hidden;
}

.bbdt-search-tai-cho.is-loading .bbdt-search-tai-cho__spinner {
    display: flex;
}

@keyframes bbdtSearchSpin {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

/* Trạng thái Loop Grid khi đang tải AJAX */
.bbdt-loop-loading {
    opacity: 0.55;
    pointer-events: none;
    transition: opacity 0.2s ease;
}

/* Elementor Nothing Found Message gốc cho Loop Grid */
.elementor-widget-loop-grid .e-loop-nothing-found,
.elementor-widget-loop-grid .elementor-nothing-found {
    grid-column: 1 / -1;
    width: 100%;
}

/* ==========================================================================
   RESPONSIVE CO GIÃN TỈ LỆ THEO ĐƠN VỊ 'EM'
   Chỉ cần tinh chỉnh font-size ở container gốc, toàn bộ thanh tự co giãn đẹp
   ========================================================================== */
@media (max-width: 1024px) {
    .bbdt-search-tai-cho {
        font-size: 15px;
        /* Tỉ lệ scale 93.75% */
    }
}

@media (max-width: 767px) {
    .bbdt-search-tai-cho {
        font-size: 14px;
        /* Tỉ lệ scale 87.5% */
        padding: 0.8em 1.25em;
    }
}

@media (max-width: 480px) {
    .bbdt-search-tai-cho {
        font-size: 13.5px;
        /* Tỉ lệ scale 84.3% */
        padding: 0.75em 1.125em;
    }
}

/* ==========================================================================
   LOOP GRID PAGINATION: LOAD ON CLICK (LOAD MORE / TẢI THÊM)
   ========================================================================== */
.e-loop-load-more,
.elementor-load-more-wrapper {
    width: 100%;
    text-align: center;
    margin-top: 2em;
    display: flex;
    justify-content: center;
    align-items: center;
}

.e-loop-load-more a,
.e-loop-load-more button,
.e-loop-load-more__button,
.elementor-load-more-button {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    position: relative !important;
    transition: all 0.25s ease !important;
}

/* Hiệu ứng xoay tròn mượt mà khi bấm nút Load on Click */
.e-loop-load-more a.is-loading,
.e-loop-load-more button.is-loading,
.e-loop-load-more__button.is-loading,
.elementor-load-more-button.is-loading,
.elementor-button.is-loading {
    pointer-events: none !important;
    opacity: 0.8 !important;
}

.e-loop-load-more a.is-loading::after,
.e-loop-load-more button.is-loading::after,
.e-loop-load-more__button.is-loading::after,
.elementor-load-more-button.is-loading::after,
.elementor-button.is-loading::after {
    content: "" !important;
    display: inline-block !important;
    width: 1.1em !important;
    height: 1.1em !important;
    margin-left: 0.6em !important;
    border: 0.15em solid rgba(202, 74, 0, 0.25) !important;
    border-top-color: #CA4A00 !important;
    border-radius: 50% !important;
    animation: bbdtSearchSpin 0.75s linear infinite !important;
    vertical-align: middle !important;
}

/* ==========================================================================
   LOOP GRID PAGINATION: THEO THIẾT KẾ FIGMA (NODE 344:3442)
   - Badge Trang X/Y: #f2f2f2, text #2e7d32, 18px Inter Medium
   - Số trang: 42x42px, radius 4px, 20px Inter Medium
   - Active: #37973c, text #ffffff
   - Nút chữ (Đầu tiên, Trước, Kế tiếp, Cuối cùng): padding 0 20px, 18px Inter Medium
   ========================================================================== */
.elementor-widget-loop-grid .elementor-pagination,
.elementor-widget-loop-grid .e-loop-pagination,
.e-loop-pagination,
.elementor-pagination.bbdt-figma-pagination {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    margin-top: 36px !important;
    margin-bottom: 20px !important;
    padding: 0 !important;
    width: 100% !important;
    list-style: none !important;
}

/* 1. Huy hiệu "Trang X/Y" */
.bbdt-page-badge {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 42px !important;
    padding: 0 20px !important;
    background-color: #f2f2f2 !important;
    color: #2e7d32 !important;
    font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
    font-size: 18px !important;
    font-weight: 500 !important;
    border-radius: 4px !important;
    white-space: nowrap !important;
    user-select: none !important;
    box-sizing: border-box !important;
    line-height: normal !important;
}

/* 2. Quy chuẩn chung cho tất cả các item phân trang */
.elementor-widget-loop-grid .elementor-pagination .page-numbers,
.elementor-widget-loop-grid .e-loop-pagination .page-numbers,
.e-loop-pagination .page-numbers,
.bbdt-figma-pagination .page-numbers {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-sizing: border-box !important;
    height: 42px !important;
    min-width: 42px !important;
    width: 42px !important;
    padding: 0 !important;
    border: none !important;
    outline: none !important;
    border-radius: 4px !important;
    background-color: #f2f2f2 !important;
    color: #2e7d32 !important;
    font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
    font-size: 20px !important;
    font-weight: 500 !important;
    text-decoration: none !important;
    line-height: normal !important;
    cursor: pointer !important;
    transition: all 0.2s ease-in-out !important;
    margin: 0 !important;
}

/* 3. Trang đang kích hoạt (Active / Current) */
.elementor-widget-loop-grid .elementor-pagination .page-numbers.current,
.elementor-widget-loop-grid .e-loop-pagination .page-numbers.current,
.e-loop-pagination .page-numbers.current,
.bbdt-figma-pagination .page-numbers.current {
    background-color: #37973c !important;
    color: #ffffff !important;
    cursor: default !important;
    pointer-events: none !important;
}

/* 4. Hiệu ứng Hover cho các số trang chưa chọn */
.elementor-widget-loop-grid .elementor-pagination a.page-numbers:not(.current):hover,
.elementor-widget-loop-grid .e-loop-pagination a.page-numbers:not(.current):hover,
.e-loop-pagination a.page-numbers:not(.current):hover,
.bbdt-figma-pagination a.page-numbers:not(.current):hover {
    background-color: #37973c !important;
    color: #ffffff !important;
}

/* 5. Nút điều hướng bằng chữ: "Đầu tiên", "Trước", "Kế tiếp", "Cuối cùng" */
.elementor-widget-loop-grid .elementor-pagination .page-numbers.prev,
.elementor-widget-loop-grid .elementor-pagination .page-numbers.next,
.elementor-widget-loop-grid .elementor-pagination .page-numbers.bbdt-page-first,
.elementor-widget-loop-grid .elementor-pagination .page-numbers.bbdt-page-last,
.elementor-widget-loop-grid .e-loop-pagination .page-numbers.prev,
.elementor-widget-loop-grid .e-loop-pagination .page-numbers.next,
.elementor-widget-loop-grid .e-loop-pagination .page-numbers.bbdt-page-first,
.elementor-widget-loop-grid .e-loop-pagination .page-numbers.bbdt-page-last,
.e-loop-pagination .page-numbers.prev,
.e-loop-pagination .page-numbers.next,
.e-loop-pagination .page-numbers.bbdt-page-first,
.e-loop-pagination .page-numbers.bbdt-page-last,
.bbdt-figma-pagination .page-numbers.prev,
.bbdt-figma-pagination .page-numbers.next,
.bbdt-figma-pagination .page-numbers.bbdt-page-first,
.bbdt-figma-pagination .page-numbers.bbdt-page-last {
    width: auto !important;
    min-width: auto !important;
    padding: 0 20px !important;
    font-size: 18px !important;
    white-space: nowrap !important;
}

/* 6. Dấu ba chấm (...) */
.elementor-widget-loop-grid .elementor-pagination .page-numbers.dots,
.elementor-widget-loop-grid .e-loop-pagination .page-numbers.dots,
.e-loop-pagination .page-numbers.dots,
.bbdt-figma-pagination .page-numbers.dots {
    width: auto !important;
    min-width: 28px !important;
    background-color: transparent !important;
    color: #2e7d32 !important;
    font-size: 20px !important;
    cursor: default !important;
    pointer-events: none !important;
}

/* 7. Đảm bảo thứ tự hiển thị chuẩn Flexbox theo Figma:
   Trang X/Y (order -999) -> Đầu tiên (-99) -> Trước (-90) -> Số trang (1) -> Kế tiếp (90) -> Cuối cùng (99) */
.bbdt-page-badge {
    order: -999 !important;
}

.elementor-pagination .bbdt-page-first,
.e-loop-pagination .bbdt-page-first {
    order: -99 !important;
}

.elementor-pagination .page-numbers.prev,
.e-loop-pagination .page-numbers.prev {
    order: -90 !important;
}

.elementor-pagination .page-numbers:not(.prev):not(.next):not(.bbdt-page-first):not(.bbdt-page-last),
.e-loop-pagination .page-numbers:not(.prev):not(.next):not(.bbdt-page-first):not(.bbdt-page-last) {
    order: 1 !important;
}

.elementor-pagination .page-numbers.next,
.e-loop-pagination .page-numbers.next {
    order: 90 !important;
}

.elementor-pagination .bbdt-page-last,
.e-loop-pagination .bbdt-page-last {
    order: 99 !important;
}

/* Ẩn nút Previous khi đang ở trang 1 & ẩn mọi nút có class is-hidden */
.elementor-pagination:has(.page-numbers.current:nth-child(-n+2)) .page-numbers.prev,
.e-loop-pagination:has(.page-numbers.current:nth-child(-n+2)) .page-numbers.prev,
.elementor-pagination .page-numbers.prev.is-hidden,
.e-loop-pagination .page-numbers.prev.is-hidden,
.elementor-pagination .page-numbers.next.is-hidden,
.e-loop-pagination .page-numbers.next.is-hidden,
.elementor-pagination .bbdt-page-first.is-hidden,
.e-loop-pagination .bbdt-page-first.is-hidden,
.elementor-pagination .bbdt-page-last.is-hidden,
.e-loop-pagination .bbdt-page-last.is-hidden {
    display: none !important;
}

/* ==========================================================================
   RESPONSIVE PHÂN TRANG CHO TABLET VÀ MOBILE
   ========================================================================== */
@media (max-width: 767px) {

    .elementor-widget-loop-grid .elementor-pagination,
    .elementor-widget-loop-grid .e-loop-pagination,
    .e-loop-pagination,
    .bbdt-figma-pagination {
        gap: 6px !important;
        margin-top: 24px !important;
    }

    .bbdt-page-badge {
        height: 38px !important;
        padding: 0 14px !important;
        font-size: 15px !important;
    }

    .elementor-widget-loop-grid .elementor-pagination .page-numbers,
    .elementor-widget-loop-grid .e-loop-pagination .page-numbers,
    .e-loop-pagination .page-numbers,
    .bbdt-figma-pagination .page-numbers {
        height: 38px !important;
        min-width: 38px !important;
        width: 38px !important;
        font-size: 17px !important;
    }

    .elementor-widget-loop-grid .elementor-pagination .page-numbers.prev,
    .elementor-widget-loop-grid .elementor-pagination .page-numbers.next,
    .elementor-widget-loop-grid .elementor-pagination .page-numbers.bbdt-page-first,
    .elementor-widget-loop-grid .elementor-pagination .page-numbers.bbdt-page-last,
    .elementor-widget-loop-grid .e-loop-pagination .page-numbers.prev,
    .elementor-widget-loop-grid .e-loop-pagination .page-numbers.next,
    .elementor-widget-loop-grid .e-loop-pagination .page-numbers.bbdt-page-first,
    .elementor-widget-loop-grid .e-loop-pagination .page-numbers.bbdt-page-last,
    .e-loop-pagination .page-numbers.prev,
    .e-loop-pagination .page-numbers.next,
    .e-loop-pagination .page-numbers.bbdt-page-first,
    .e-loop-pagination .page-numbers.bbdt-page-last,
    .bbdt-figma-pagination .page-numbers.prev,
    .bbdt-figma-pagination .page-numbers.next,
    .bbdt-figma-pagination .page-numbers.bbdt-page-first,
    .bbdt-figma-pagination .page-numbers.bbdt-page-last {
        width: auto !important;
        padding: 0 14px !important;
        font-size: 15px !important;
    }
}

@media (max-width: 480px) {

    .elementor-widget-loop-grid .elementor-pagination,
    .elementor-widget-loop-grid .e-loop-pagination,
    .e-loop-pagination,
    .bbdt-figma-pagination {
        gap: 5px !important;
    }

    .bbdt-page-badge {
        height: 36px !important;
        padding: 0 12px !important;
        font-size: 14px !important;
        width: 100% !important;
        text-align: center !important;
        margin-bottom: 4px !important;
    }

    .elementor-widget-loop-grid .elementor-pagination .page-numbers,
    .elementor-widget-loop-grid .e-loop-pagination .page-numbers,
    .e-loop-pagination .page-numbers,
    .bbdt-figma-pagination .page-numbers {
        height: 36px !important;
        min-width: 36px !important;
        width: 36px !important;
        font-size: 15px !important;
    }

    .elementor-widget-loop-grid .elementor-pagination .page-numbers.prev,
    .elementor-widget-loop-grid .elementor-pagination .page-numbers.next,
    .elementor-widget-loop-grid .elementor-pagination .page-numbers.bbdt-page-first,
    .elementor-widget-loop-grid .elementor-pagination .page-numbers.bbdt-page-last,
    .elementor-widget-loop-grid .e-loop-pagination .page-numbers.prev,
    .elementor-widget-loop-grid .e-loop-pagination .page-numbers.next,
    .elementor-widget-loop-grid .e-loop-pagination .page-numbers.bbdt-page-first,
    .elementor-widget-loop-grid .e-loop-pagination .page-numbers.bbdt-page-last,
    .e-loop-pagination .page-numbers.prev,
    .e-loop-pagination .page-numbers.next,
    .e-loop-pagination .page-numbers.bbdt-page-first,
    .e-loop-pagination .page-numbers.bbdt-page-last,
    .bbdt-figma-pagination .page-numbers.prev,
    .bbdt-figma-pagination .page-numbers.next,
    .bbdt-figma-pagination .page-numbers.bbdt-page-first,
    .bbdt-figma-pagination .page-numbers.bbdt-page-last {
        width: auto !important;
        padding: 0 10px !important;
        font-size: 13px !important;
    }
}