/* ==========================================================================
   LƯU Ý KIẾN TRÚC CSS (Bắt buộc - xem AGENTS.md & v7.md Mục 7.5):
   TUYỆT ĐỐI KHÔNG viết @media trong file này.
   100% Media Queries của phân hệ WooCommerce nằm tại `responsive.css`
   theo 4 breakpoint chuẩn hóa: 1199.98px / 991.98px / 767.98px / 575.98px.
   ========================================================================== */

/*
Style background overlay woocommerce product gallery lightbox
--------------------------------------------------------------*/
.pswp__bg {
    background: #000000a3 !important;
}

/*
Style image woocommerce product gallery lightbox
--------------------------------------------------------------*/
.pswp img {
    border-radius: 5px;
}

/* Style Woocommerce Message
--------------------------------------------------------------*/
.woocommerce-error,
.woocommerce-info,
.woocommerce-message {
    background-color: #76a1ff42;
    border: 1px dashed #3d6cd242;
    color: #000000;
    padding: 15px;
    border-radius: 5px;
    margin-bottom: 20px;
    font-weight: 500;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    outline: none !important;
}

/* Style for unordered lists inside the Woocommerce messages
--------------------------------------------------------------*/
.woocommerce-error ul,
.woocommerce-info ul,
.woocommerce-message ul {
    padding: 0px;
    margin: 0px;
}

/* Style for list items inside Woocommerce messages
--------------------------------------------------------------*/
.woocommerce-error li,
.woocommerce-info li,
.woocommerce-message li {
    list-style: none;
    margin: 0px;
    padding: 5px 0px;
    display: none;
    width: 100%;
}

/* Display the first list item inside Woocommerce messages
--------------------------------------------------------------*/
.woocommerce-error li:first-child,
.woocommerce-info li:first-child,
.woocommerce-message li:first-child {
    display: block;
}

/* Style for links inside Woocommerce messages
--------------------------------------------------------------*/
.woocommerce-error a,
.woocommerce-info a,
.woocommerce-message a {
    color: #0c5460;
    text-decoration: underline;
    font-weight: normal;
    display: inline-block;
    margin-left: 10px;
}

/* Style for hovered links inside Woocommerce messages
--------------------------------------------------------------*/
.woocommerce-error a:hover,
.woocommerce-info a:hover,
.woocommerce-message a:hover {
    color: #004085;
    text-decoration: none;
}

/* Style for information messages
--------------------------------------------------------------*/
.woocommerce-info {
    border: 1px dashed #ff8100;
    background-color: #ff81002b;
    color: #ff8100;
}

/* Style for error messages
--------------------------------------------------------------*/
.woocommerce-error {
    border: 1px dashed #ff0000;
    background-color: #ff00001f;
    color: #ff0000;
}

/* Style FlexSlider
-------------------------------------------------------------- */
.flex-slider-theme .item-product-loop {
    width: 100% !important;
}

.flex-slider-theme {
    padding-left: 40px;
    padding-right: 40px;
}

.flex-slider-theme[data-nav='false'] {
    padding-left: 0px;
    padding-right: 0px;
}

/* Style for the main flexslider container
--------------------------------------------------------------*/
.woocommerce .flexslider {
    position: relative;
}

.woocommerce .flexslider .flex-viewport {
    overflow: hidden;
}

/* Style for the slides inside the flexslider
--------------------------------------------------------------*/
.woocommerce .flexslider .slides {
    display: flex;
    flex-direction: row;
    list-style: none;
    margin: 0;
    padding: 0;
}

/* Style for each slide in the flexslider
--------------------------------------------------------------*/
.woocommerce .flexslider .slides li {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: auto;
    margin: 0;
    position: relative;
}

/* Style for the images inside each slide
--------------------------------------------------------------*/
.woocommerce .flexslider .slides img {
    max-width: 100%;
    height: auto;
    border: none;
    border-bottom-right-radius: 35px;
    transition: transform 0.3s ease;
}

/* Style for the navigation buttons (prev & next)
--------------------------------------------------------------*/
.woocommerce .flexslider .flex-direction-nav {
    position: absolute;
    top: 50%;
    width: calc(100% + 80px);
    transform: translateY(-50%);
    display: flex;
    justify-content: space-between;
    pointer-events: none;
    z-index: 10;
    list-style: none;
    margin: 0px;
    padding: 0px;
    height: 100%;
    left: -40px;
}

.woocommerce .flexslider .flex-direction-nav li {
    height: 100%;
}

/* Style for each individual navigation button
--------------------------------------------------------------*/
.woocommerce .flexslider .flex-direction-nav a {
    pointer-events: auto;
    background-color: #FFF;
    color: #000;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    padding: 5px 10px;
    height: 100%;
    text-indent: 150px;
    width: 30px;
    position: relative;
    overflow: hidden;
    outline: none !important;
    box-shadow: -10px 0px 10px -5px #00000014;
    white-space: nowrap;
}

.woocommerce .flexslider .flex-direction-nav a:hover {
    box-shadow: -10px 0px 10px -5px #00000014;
}

.woocommerce .flexslider .flex-direction-nav a:before {
    content: "\003E";
    position: absolute;
    left: 50%;
    top: 50%;
    font-size: 22px;
    text-indent: 0px;
    transform: translate(-50%, -50%);
}

.woocommerce .flexslider .flex-direction-nav a.flex-prev {
    box-shadow: 10px 0px 10px -5px #00000014;
}

.woocommerce .flexslider .flex-direction-nav a.flex-prev:hover {
    box-shadow: 10px 0px 10px -5px #00000029;
}

.woocommerce .flexslider .flex-direction-nav a.flex-prev:before {
    content: "<";
}

.woocommerce .flex-slider-theme-circle .flexslider .flex-direction-nav a {
    box-shadow: none;
    width: 40px;
    height: 40px;
    color: #000;
    border-radius: 50%;
    background: #ffffff82;
}

.woocommerce .flex-slider-theme-circle .flexslider .flex-direction-nav li {
    display: flex;
    flex-direction: row;
    align-items: center;
}

.woocommerce .flex-slider-theme-circle .flexslider .flex-direction-nav a:hover {
    background: #FFF;
}

/* Position and alignment for the previous navigation button
--------------------------------------------------------------*/
.woocommerce .flexslider .flex-prev {
    left: 0px;
}

/* Position and alignment for the next navigation button
--------------------------------------------------------------*/
.woocommerce .flexslider .flex-next {
    right: 0px;
}

/* Style for the thumbnail slider navigation
--------------------------------------------------------------*/
.woocommerce .flex-control-nav {
    display: flex;
    justify-content: center;
    gap: 5px;
    padding: 0px;
    list-style: none;
    margin: 20px 0px 10px 0px;
}

/* Style for each thumbnail in the slider
--------------------------------------------------------------*/
.woocommerce .flex-control-nav li a {
    display: inline-block;
    text-align: center;
    border-radius: 50%;
    width: 12px;
    height: 12px;
    overflow: hidden;
    text-indent: 100px;
    border: 1px solid #000;
}

.woocommerce .flex-control-nav li a.flex-active {
    background: #000;
}

/* Style for the images inside the thumbnail navigation
--------------------------------------------------------------*/
.woocommerce .flex-control-nav li img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Style for hover and active states of the thumbnail
--------------------------------------------------------------*/
.woocommerce .flex-control-nav li:hover,
.woocommerce .flex-control-nav li.flex-active {
    border-color: #000;
}

/* Style for the submit icon in the custom form
--------------------------------------------------------------*/
.woocommerce-theme-form .icon-submit {
    width: 18px !important;
    margin: 0px 5px 0px 0px !important;
    filter: brightness(0) invert(1);
}

/* Style for the table inside the custom form
--------------------------------------------------------------*/
.woocommerce-theme-form table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 20px;
    background-color: #fff;
    overflow: hidden;
    border: 0px;
}

/* Style for the table header
--------------------------------------------------------------*/
.woocommerce-theme-form table thead th {
    background-color: #333;
    color: #fff;
    text-align: left;
    padding: 10px;
    font-size: 14px;
    text-transform: uppercase;
    font-weight: 600;
}

/* Style for table rows
--------------------------------------------------------------*/
.woocommerce-theme-form table tr {
    border-bottom: 1px dashed #ddd;
}

.woocommerce-theme-form table head tr {
    border-bottom: 0;
}

/* Style for table columns (product name, price, etc.)
--------------------------------------------------------------*/
.woocommerce-theme-form table th,
.woocommerce-theme-form table td {
    padding: 10px;
    text-align: left;
    font-size: 14px;
    vertical-align: middle;
    font-weight: 400;
    border: 0px;
}

/* Style for product price
--------------------------------------------------------------*/
.woocommerce-theme-form .woocommerce-Price-amount {
    font-size: 16px;
    font-weight: 600;
    color: #ff0000;
}

/* Style for the custom submit button
--------------------------------------------------------------*/
.woocommerce-theme-form .button-theme-template {
    padding: 5px 20px;
    background: #000;
    border: 0;
    height: 40px;
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
}

/* Style for select fields and text inputs
--------------------------------------------------------------*/
.woocommerce-theme-form select,
.woocommerce-theme-form .input-text {
    padding: 5px 15px;
    border: 1px solid #ccc;
    height: 40px;
    width: 100%;
    border-radius: 5px;
}

/* Style for textarea input
--------------------------------------------------------------*/
.woocommerce-theme-form textarea.input-text {
    height: 100px;
    padding-top: 10px;
    padding-bottom: 10px;
}

/* Style for focused input fields
--------------------------------------------------------------*/
.woocommerce-theme-form .input-text:focus {
    border-color: #0033a1;
    outline: none;
    box-shadow: 0px 0px 5px rgba(0, 51, 161, 0.5);
}

/* Style for select2 container (dropdown)
--------------------------------------------------------------*/
.woocommerce-theme-form .select2-container .select2-selection--single {
    height: 40px;
    border: 1px solid #ccc;
    margin-bottom: 2px;
}

/* Style for the selected option text in select2
--------------------------------------------------------------*/
.woocommerce-theme-form .select2-container--default .select2-selection--single .select2-selection__rendered {
    line-height: 40px;
    font-size: 13px;
}

/* Style for the arrow in select2 dropdown
--------------------------------------------------------------*/
.woocommerce-theme-form .select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 40px;
}

/* Style for list items in the table
--------------------------------------------------------------*/
.woocommerce-theme-form table ul,
.woocommerce-theme-form table ul li,
.woocommerce-theme-form li {
    list-style: none;
    margin: 0px;
    padding: 0px;
    position: relative;
}

/* Style for Links in Cart
--------------------------------------------------------------*/
.woocommerce-cart-form table td a {
    display: inline-block;
}

/* Container for Cart Page
--------------------------------------------------------------*/
.woocommerce-cart .container-body {
    border: none;
    border-radius: 0;
    margin: 0 auto;
    max-width: 100%;
    background: transparent;
    box-shadow: none;
}

/* Title for Cart Page
--------------------------------------------------------------*/
.woocommerce-cart h1 {
    font-size: 24px;
    font-weight: 600;
    margin-bottom: 20px;
    text-align: center;
    text-transform: uppercase;
}

/* Style for Proceed to Checkout Button
--------------------------------------------------------------*/
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button {
    height: auto;
    padding: 10px 30px;
}

/* Style for Shipping Calculator
--------------------------------------------------------------*/
.woocommerce-cart #shipping-calculator-form {
    max-width: 320px;
}

.woocommerce-cart #shipping-calculator-form .form-row {
    padding: 5px 0px;
    margin: 0px;
}

.woocommerce-cart #shipping-calculator-form button {
    background: #000;
    border: 0;
}

/* Responsive Design for Cart Page
--------------------------------------------------------------*/
/* ==============================================================
   BIODINO V7 - CHECKOUT DESIGN SYSTEM (Chuẩn Wireframe Demo)
   Ref: https://biodino-ux-foundations.elmall-4509.chatgpt.site/wireframe#checkout
   ============================================================== */

/* 1. Reset khung trang tổng thể & triệt tiêu CSS cũ */
body.woocommerce-checkout {
    background-color: var(--fc_body_background_color, #FBFAF5) !important;
}

body.woocommerce-checkout .content-page {
    background-color: transparent !important;
    padding: 0 !important;
    margin: 0 !important;
}

body.woocommerce-checkout .content-page .container {
    background-color: transparent !important;
    box-shadow: none !important;
    padding-top: 10px;
    padding-bottom: 40px;
}

/* Ẩn tiêu đề h1 mặc định thừa từ page-content.php */
body.woocommerce-checkout .title-page,
body.woocommerce-checkout .content-page .title-page {
    display: none !important;
}

body.woocommerce-checkout .content-editor {
    padding: 0 !important;
    margin: 0 !important;
}

/* default.css đặt `h1..h6 { margin: 0; padding: 10px 0; }`.
   Trong khối checkout, padding dọc 10px đó cộng thêm 20px vào mỗi tiêu đề, đẩy tiêu đề
   lệch khỏi badge số thứ tự và phá nhịp dọc. Vô hiệu hoá cho toàn bộ phân hệ. */
.bd-checkout-page-wrapper h1,
.bd-checkout-page-wrapper h2,
.bd-checkout-page-wrapper h3,
.bd-checkout-page-wrapper h4,
.bd-checkout-page-wrapper h5,
.bd-checkout-page-wrapper h6 {
    padding: 0;
}

/* Triệt tiêu viền table xám #ddd cũ của .content-editor table trong default.css */
body.woocommerce-checkout .content-editor table:not(.bd-checkout-review-table) {
    border-collapse: collapse !important;
    border: none !important;
    margin: 0 0 10px 0 !important;
    width: 100% !important;
    background: transparent !important;
}

body.woocommerce-checkout .content-editor table:not(.bd-checkout-review-table) th,
body.woocommerce-checkout .content-editor table:not(.bd-checkout-review-table) td {
    border: none !important;
    padding: 0 !important;
    background: transparent !important;
}

.bd-checkout-page-wrapper {
    margin-top: 10px;
    margin-bottom: 40px;
}

/* 2. Page Header */
.bd-checkout-header {
    border-bottom: 1px solid var(--fc_color_border, #E1E5DF);
    padding-bottom: 16px;
    margin-bottom: 24px;
}

.bd-checkout-header h1 {
    font-size: 28px;
    font-weight: 800;
    color: var(--fc_color_secondary, #263C22);
    letter-spacing: -0.02em;
    line-height: 1.15;
}

.bd-checkout-header .no-account {
    color: var(--fc_color_primary, #3F6234);
    background-color: var(--fc_color_soft_green, #EEF5E8);
    border-radius: var(--fc_radius_pill, 999px);
    padding: 6px 14px;
    font-size: 12px;
    font-weight: 700;
}

/* 3. Bố cục 2 cột Checkout (hệ 12 cột Bootstrap + .row.gap-4) */
.bd-checkout-main-col,
.bd-checkout-side-col {
    min-width: 0;
}

/* 4. Thẻ Card */
.bd-checkout-card {
    border: 1px solid var(--fc_color_border, #E1E5DF) !important;
    border-radius: var(--fc_radius_lg, 16px) !important;
    background: var(--fc_color_surface, #FFFFFF) !important;
    padding: var(--fc_space_5, 24px) !important;
    box-shadow: var(--fc_shadow_sm);
    margin: 0 !important;
}

/* Tiêu đề Card: badge số thứ tự + tiêu đề + mô tả */
.bd-checkout-card .form-title {
    display: flex;
    align-items: flex-start;
    gap: var(--fc_space_3, 12px);
    margin-bottom: var(--fc_space_4, 16px);
}

.bd-step-badge {
    /* Cao bằng line-height của h2 bên dưới -> badge và tiêu đề thẳng hàng, không lệch */
    width: 24px;
    height: 24px;
    min-width: 24px;
    border-radius: var(--fc_radius_sm, 8px);
    background-color: var(--fc_color_secondary, #263C22);
    color: var(--fc_color_surface, #FFFFFF);
    font-size: 12px;
    font-weight: 900;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    line-height: 1;
}

.bd-checkout-card .form-title h2,
.bd-checkout-card .form-title h3 {
    color: var(--fc_color_secondary, #263C22);
    font-size: 16px;
    font-weight: 800;
    line-height: 24px;
    margin: 0 0 var(--fc_space_1, 4px) 0;
}

.bd-checkout-card .form-title p {
    color: var(--fc_color_text_muted, #6B7569);
    font-size: 12px;
    line-height: 18px;
    margin: 0;
}

/* 5. Form Fields (grid 2 cột) */
.bd-checkout-fields-wrap {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin: 0;
    padding: 0;
}

.bd-field-grid,
.woocommerce-billing-field-wrapper,
.woocommerce-additional-field-wrapper {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 12px 14px !important;
    margin: 0 !important;
    padding: 0 !important;
}

.woocommerce form.checkout .form-row,
.bd-checkout-fields-wrap .form-row {
    margin: 0 !important;
    padding: 0 !important;
    float: none !important;
    width: 100% !important;
}

.bd-checkout-fields-wrap .form-row-wide {
    width: 100% !important;
}

#billing_first_name_field {
    grid-column: 1 !important;
    grid-row: 1 !important;
}

#billing_phone_field {
    grid-column: 2 !important;
    grid-row: 1 !important;
}

#billing_address_1_field {
    grid-column: 1 !important;
    grid-row: 2 !important;
}

#order_comments_field {
    grid-column: 2 !important;
    grid-row: 2 !important;
}

.bd-checkout-fields-wrap .form-row label {
    display: inline-flex !important;
    align-items: center !important;
    gap: 2px !important;
    color: var(--fc_color_secondary, #263C22) !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    margin-bottom: 6px !important;
    line-height: 1.3 !important;
}

.bd-checkout-fields-wrap .form-row label .required {
    display: inline !important;
    color: var(--fc_color_danger, #C92A2A) !important;
    text-decoration: none !important;
    margin-left: 2px !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    line-height: 1 !important;
}

.bd-checkout-fields-wrap .form-row label .optional {
    display: none !important;
}

.woocommerce form.checkout .form-row .input-text,
.woocommerce form.checkout .form-row textarea {
    width: 100% !important;
    /* v7.md §4.3: Form Input cao 48px, bo góc 12px, viền 1px --fc_color_border */
    min-height: 48px !important;
    border: 1px solid var(--fc_color_border, #E1E5DF) !important;
    border-radius: var(--fc_radius_md, 12px) !important;
    background: var(--fc_color_surface, #FFFFFF) !important;
    color: var(--fc_body_color, #3C443B) !important;
    padding: 10px 14px !important;
    font-size: 14px !important;
    font-family: inherit !important;
    box-shadow: none !important;
    transition: border-color var(--fc_transition_fast, 0.2s ease), outline var(--fc_transition_fast, 0.2s ease) !important;
    box-sizing: border-box !important;
}

.woocommerce form.checkout .form-row textarea {
    min-height: 48px !important;
    height: 48px !important;
    resize: vertical !important;
}

.woocommerce form.checkout .form-row .input-text:focus,
.woocommerce form.checkout .form-row textarea:focus {
    border-color: var(--fc_color_primary, #3F6234) !important;
    /* Vòng focus mềm: giữ dòng rgba làm fallback, dòng color-mix ghi đè khi trình duyệt hỗ trợ */
    outline: 3px solid rgba(142, 174, 104, 0.18) !important;
    outline-color: color-mix(in srgb, var(--fc_color_tertiary, #8EAE68) 18%, transparent) !important;
}

.woocommerce form.checkout .form-row .input-text::placeholder,
.woocommerce form.checkout .form-row textarea::placeholder {
    color: var(--fc_color_text_muted, #6B7569) !important;
    font-size: 14px !important;
}

/* 6. Khối trạng thái giao hàng */
.bd-shipping-card-body {
    border: 1px solid var(--fc_color_border, #E1E5DF);
    background-color: var(--fc_color_soft_green, #EEF5E8);
    border-radius: var(--fc_radius_md, 12px);
    padding: 12px 16px;
}

.bd-shipping-info {
    display: flex;
    align-items: center;
    gap: 12px;
}

.bd-shipping-info > .biodino-icon {
    color: var(--fc_color_primary, #3F6234);
    flex-shrink: 0;
}

.bd-shipping-info-text {
    flex-grow: 1;
    min-width: 0;
}

.bd-shipping-label {
    display: block;
    color: var(--fc_color_secondary, #263C22);
    font-size: 14px;
    font-weight: 700;
    line-height: 1.35;
}

.bd-shipping-note {
    display: block;
    color: var(--fc_color_text_muted, #6B7569);
    font-size: 12px;
    line-height: 1.4;
    margin-top: 3px;
}

.bd-shipping-cost {
    color: var(--fc_color_primary, #3F6234);
    font-size: 14px;
    font-weight: 800;
    white-space: nowrap;
    flex-shrink: 0;
}

/* 7. Card 3 - Thanh toán (Reset giao diện #payment của WooCommerce) */
.woocommerce-checkout #payment {
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
    border-radius: 0 !important;
}

.woocommerce-checkout #payment ul.payment_methods {
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
    list-style: none !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
}

.woocommerce-checkout #payment ul.payment_methods li.bd-payment-method-item {
    border: 1px solid var(--fc_color_border, #E1E5DF) !important;
    background: var(--fc_color_surface, #FFFFFF) !important;
    border-radius: var(--fc_radius_md, 12px) !important;
    padding: 0 !important;
    margin: 0 !important;
    transition: border-color var(--fc_transition_fast, 0.2s ease), background-color var(--fc_transition_fast, 0.2s ease) !important;
    cursor: pointer !important;
    overflow: hidden !important;
    list-style: none !important;
}

.woocommerce-checkout #payment ul.payment_methods li.bd-payment-method-item:hover {
    border-color: var(--fc_color_primary, #3F6234) !important;
}

/* Trạng thái đang chọn */
.woocommerce-checkout #payment ul.payment_methods li.bd-payment-method-item:has(input.input-radio:checked) {
    border-color: var(--fc_color_primary, #3F6234) !important;
    background-color: var(--fc_color_soft_green, #EEF5E8) !important;
}

.woocommerce-checkout #payment .bd-payment-label {
    min-height: 62px !important;
    padding: 12px 16px !important;
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    margin: 0 !important;
    cursor: pointer !important;
    width: 100% !important;
}

.woocommerce-checkout #payment .bd-payment-radio {
    accent-color: var(--fc_color_primary, #3F6234) !important;
    width: 18px !important;
    height: 18px !important;
    margin: 0 !important;
    cursor: pointer !important;
}

.woocommerce-checkout #payment .bd-payment-title {
    color: var(--fc_color_secondary, #263C22) !important;
    font-size: 14px !important;
    font-weight: 700 !important;
}

.woocommerce-checkout #payment .bd-payment-desc {
    color: var(--fc_color_text_muted, #6B7569) !important;
    font-size: 12px !important;
    margin-top: 3px !important;
}

.woocommerce-checkout #payment .bd-payment-title-wrap {
    min-width: 0;
}

.woocommerce-checkout #payment .bd-payment-icon {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
}

.woocommerce-checkout #payment .bd-payment-icon img {
    max-height: 32px;
    width: auto;
}

.woocommerce-checkout #payment div.payment_box,
.woocommerce-checkout #payment .bd-payment-box {
    background: var(--fc_color_surface, #FFFFFF) !important;
    border: 1px solid var(--fc_color_border, #E1E5DF) !important;
    border-radius: var(--fc_radius_sm, 8px) !important;
    box-shadow: none !important;
    color: var(--fc_color_text_muted, #6B7569) !important;
    font-size: 13px !important;
    line-height: 1.45 !important;
    padding: 12px 14px !important;
    margin: 0 16px 14px 16px !important;
}

.woocommerce-checkout #payment div.payment_box::before {
    display: none !important;
}

/* Khối submit (.place-order) nằm ở cột tóm tắt đơn hàng */

/* 8. Cột Phải - Order Summary Card */
.bd-checkout-summary-card {
    border: 1px solid var(--fc_color_border, #E1E5DF) !important;
    border-radius: var(--fc_radius_lg, 16px) !important;
    background: var(--fc_color_surface, #FFFFFF) !important;
    padding: var(--fc_space_5, 24px) !important;
    box-shadow: var(--fc_shadow_sm) !important;
    position: sticky !important;
    top: var(--fc_space_5, 24px) !important;
    margin: 0 !important;
}

.bd-checkout-summary-card h2 {
    color: var(--fc_color_secondary, #263C22) !important;
    font-size: 16px !important;
    font-weight: 800 !important;
    margin: 0 0 16px 0 !important;
}

/* Bảng Review Order (Đơn hàng của bạn) */
.woocommerce-checkout table.bd-checkout-review-table {
    border-collapse: collapse !important;
    border: none !important;
    margin: 0 !important;
    width: 100% !important;
    table-layout: auto !important;
    background: transparent !important;
}

/* Hàng sản phẩm */
.woocommerce-checkout table.bd-checkout-review-table tbody.bd-checkout-items tr.bd-checkout-item-row td {
    padding: 16px 0 !important;
    border: none !important;
    border-bottom: 1px solid var(--fc_color_border, #E1E5DF) !important;
    background: transparent !important;
    vertical-align: middle !important;
}

.bd-checkout-item-row td.product-name {
    width: auto !important;
    padding-right: 12px !important;
}

/* Khung ảnh sản phẩm Checkout: Tỉ lệ tự nhiên theo bao bì thực tế (KHÔNG ÉP VUÔNG, KHÔNG NỀN XANH) */
.bd-checkout-thumb {
    height: 64px !important;
    width: auto !important;
    max-width: 64px !important;
    min-width: 0 !important;
    border-radius: var(--fc_radius_sm, 8px) !important;
    border: 1px solid var(--fc_color_border, #E1E5DF) !important;
    background: transparent !important;
    background-color: transparent !important;
    overflow: hidden !important;
    flex-shrink: 0 !important;
    box-sizing: border-box !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.bd-checkout-thumb img,
.bd-checkout-thumb .bd-checkout-prod-img {
    height: 64px !important;
    width: auto !important;
    max-width: 64px !important;
    max-height: 64px !important;
    object-fit: contain !important;
    border-radius: inherit !important;
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
}

.bd-checkout-prod-info {
    min-width: 0 !important;
}

.bd-checkout-prod-title {
    color: var(--fc_color_secondary, #263C22) !important;
    font-size: 14.5px !important;
    font-weight: 700 !important;
    line-height: 1.35 !important;
    word-break: break-word !important;
}

.bd-checkout-prod-meta {
    font-size: 12.5px !important;
    color: var(--fc_color_text_muted, #6B7569) !important;
    line-height: 1.35 !important;
    margin-top: 3px !important;
}

.bd-checkout-item-row td.product-total {
    width: 1% !important;
    white-space: nowrap !important;
    text-align: right !important;
    vertical-align: middle !important;
}

.bd-checkout-item-row .product-total,
.bd-checkout-item-row .product-total span {
    color: var(--fc_color_secondary, #263C22) !important;
    font-size: 15px !important;
    font-weight: 700 !important;
}

/* Các hàng tính tiền totals (Tfoot) */
.woocommerce-checkout table.bd-checkout-review-table tfoot.bd-checkout-totals tr td,
.woocommerce-checkout table.bd-checkout-review-table tfoot.bd-checkout-totals tr th {
    padding: 13px 0 !important;
    border: none !important;
    border-bottom: 1px solid var(--fc_color_border, #E1E5DF) !important;
    font-size: 14px !important;
    color: var(--fc_color_text_muted, #6B7569) !important;
    background: transparent !important;
    vertical-align: middle !important;
    text-align: left !important;
    font-weight: 400 !important;
}

.woocommerce-checkout table.bd-checkout-review-table tfoot.bd-checkout-totals tr td:last-child {
    text-align: right !important;
    color: var(--fc_color_secondary, #263C22) !important;
    font-weight: 700 !important;
    font-size: 15px !important;
    white-space: nowrap !important;
}

/* Riêng hàng giao hàng chờ địa chỉ */
.woocommerce-checkout table.bd-checkout-review-table tfoot.bd-checkout-totals tr.woocommerce-shipping-totals td:last-child {
    font-weight: 400 !important;
    color: var(--fc_color_text_muted, #6B7569) !important;
    font-size: 14px !important;
}

/* Danh sách phương thức vận chuyển trong bảng tóm tắt */
.woocommerce-checkout table.bd-checkout-review-table .woocommerce-shipping-methods {
    display: flex;
    flex-direction: column;
    gap: 8px;
    /* Đẩy khối sang phải cho khớp cột giá trị, nhưng chữ bên trong vẫn căn trái dễ đọc */
    width: fit-content;
    margin: 0 0 0 auto;
    padding: 0;
    list-style: none;
    text-align: left;
}

.woocommerce-checkout table.bd-checkout-review-table .woocommerce-shipping-methods li {
    display: flex;
    align-items: center;
    gap: 8px;
    /* v7.md §4.3 - vùng bấm tối thiểu 44px */
    min-height: 44px;
    margin: 0;
    list-style: none;
}

.woocommerce-checkout table.bd-checkout-review-table .woocommerce-shipping-methods label {
    margin: 0;
    font-weight: 400;
    cursor: pointer;
}

.woocommerce-checkout table.bd-checkout-review-table .woocommerce-shipping-methods input.shipping_method {
    width: 18px;
    height: 18px;
    margin: 0;
    flex-shrink: 0;
    accent-color: var(--fc_color_primary, #3F6234);
    cursor: pointer;
}

/* Hàng Tổng cộng */
.woocommerce-checkout table.bd-checkout-review-table tfoot.bd-checkout-totals tr.order-total td {
    border-bottom: none !important;
    padding-top: 18px !important;
    padding-bottom: 6px !important;
}

.woocommerce-checkout table.bd-checkout-review-table tfoot.bd-checkout-totals tr.order-total td:first-child {
    font-size: 20px !important;
    font-weight: 800 !important;
    color: var(--fc_color_secondary, #263C22) !important;
}

.woocommerce-checkout table.bd-checkout-review-table tfoot.bd-checkout-totals tr.order-total td:last-child,
.woocommerce-checkout table.bd-checkout-review-table tfoot.bd-checkout-totals tr.order-total td .woocommerce-Price-amount {
    font-size: 22px !important;
    font-weight: 800 !important;
    color: var(--fc_color_secondary, #263C22) !important;
}

/* Hàng mã giảm giá: giữ màu nhấn Forest cho cả nhãn và số tiền */
.woocommerce-checkout table.bd-checkout-review-table tfoot.bd-checkout-totals tr.cart-discount td,
.woocommerce-checkout table.bd-checkout-review-table tfoot.bd-checkout-totals tr.cart-discount td:last-child {
    color: var(--fc_color_primary, #3F6234) !important;
}

/* Khối nút đặt hàng + điều khoản (nằm trong cột tóm tắt đơn hàng) */
.bd-checkout-submit-wrap {
    margin-top: var(--fc_space_5, 24px);
}

.bd-checkout-submit-wrap .summary-note {
    color: var(--fc_color_text_muted, #6B7569) !important;
    font-size: 12px !important;
    line-height: 1.5 !important;
    margin: 0 !important;
}

/* Điều khoản & Điều kiện */
.bd-checkout-submit-wrap .woocommerce-terms-and-conditions-wrapper {
    font-size: 13px;
    color: var(--fc_color_text_muted, #6B7569);
}

.bd-checkout-submit-wrap .woocommerce-terms-and-conditions-wrapper .form-row {
    display: flex;
    align-items: flex-start;
}

.bd-checkout-submit-wrap .woocommerce-form__label-for-checkbox {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin: 0;
    /* v7.md §4.3 - vùng bấm tối thiểu 44px */
    min-height: 44px;
    cursor: pointer;
    font-weight: 400;
    line-height: 1.45;
}

.bd-checkout-submit-wrap .woocommerce-form__input-checkbox {
    width: 18px;
    height: 18px;
    margin: 2px 0 0 0;
    flex-shrink: 0;
    accent-color: var(--fc_color_primary, #3F6234);
    cursor: pointer;
}

.bd-checkout-submit-wrap .woocommerce-terms-and-conditions-checkbox-text a {
    color: var(--fc_color_permalink, #3F6234);
}

.bd-checkout-submit-wrap .woocommerce-terms-and-conditions-wrapper .required {
    color: var(--fc_color_danger, #C92A2A);
    font-weight: 700;
}

/* Nút Submit Xác nhận đặt hàng */
#place_order.bd-btn-place-order,
.bd-btn-place-order {
    width: 100% !important;
    min-height: 48px !important;
    border: 1px solid var(--fc_color_primary, #3F6234) !important;
    background-color: var(--fc_color_primary, #3F6234) !important;
    border-radius: var(--fc_radius_md, 12px) !important;
    color: var(--fc_color_surface, #FFFFFF) !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    cursor: pointer !important;
    box-shadow: var(--fc_shadow_md) !important;
    transition: background-color var(--fc_transition_fast, 0.2s ease), transform var(--fc_transition_fast, 0.2s ease), box-shadow var(--fc_transition_fast, 0.2s ease) !important;
    padding: 12px 20px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    white-space: nowrap !important;
    box-sizing: border-box !important;
    position: relative !important;
}

/* Icon hộp hàng (mask trỏ về assets/icons/package.svg) */
#place_order.bd-btn-place-order::before,
.bd-btn-place-order::before {
    content: "" !important;
    display: inline-block !important;
    width: 18px !important;
    height: 18px !important;
    min-width: 18px !important;
    background-color: var(--fc_color_surface, #FFFFFF) !important;
    -webkit-mask: url("../icons/package.svg") no-repeat center / contain !important;
    mask: url("../icons/package.svg") no-repeat center / contain !important;
    margin-right: 8px !important;
    vertical-align: middle !important;
}

.bd-btn-place-order:hover {
    background-color: var(--fc_color_secondary, #263C22) !important;
    border-color: var(--fc_color_secondary, #263C22) !important;
    box-shadow: var(--fc_shadow_lg) !important;
    transform: translateY(-1px) !important;
}

.bd-btn-place-order:active {
    transform: translateY(0) !important;
}

/* Nút "Update totals" chỉ hiển thị khi trình duyệt tắt JavaScript */
.bd-btn-update-totals {
    width: 100%;
    min-height: 44px;
    margin-top: var(--fc_space_2, 8px);
    border: 1px solid var(--fc_color_primary, #3F6234);
    background-color: var(--fc_color_primary, #3F6234);
    border-radius: var(--fc_radius_md, 12px);
    color: var(--fc_color_surface, #FFFFFF);
    font-weight: 600;
    cursor: pointer;
}

/* Cam kết an tâm */
.secure-note {
    color: var(--fc_color_primary, #3F6234) !important;
    background-color: var(--fc_color_soft_green, #EEF5E8) !important;
    border-radius: var(--fc_radius_sm, 8px) !important;
    padding: 10px 14px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    text-align: left !important;
    margin: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 8px !important;
    width: 100% !important;
}

/* Ẩn Coupon Toggle trên trang checkout theo thiết kế */
.woocommerce-checkout .woocommerce-form-coupon-toggle,
.woocommerce-checkout .checkout_coupon,
.woocommerce-checkout .woocommerce-form-coupon {
    display: none !important;
}


.woocommerce-checkout .woocommerce-info {
    background-color: var(--fc_color_soft_green, #EEF5E8);
    border-left: 3px solid var(--fc_color_primary, #3F6234);
    border-radius: var(--fc_radius_sm, 8px);
    padding: 12px 16px;
    font-size: 14px;
    color: var(--fc_color_heading, #263C22);
    margin-bottom: 16px;
}

.woocommerce-checkout .woocommerce-info a {
    color: var(--fc_color_primary, #3F6234);
    font-weight: 600;
    text-decoration: underline;
}

.woocommerce-checkout .checkout_coupon.woocommerce-form-coupon {
    background: var(--fc_color_surface, #FFFFFF);
    border: 1px solid var(--fc_color_border, #E1E5DF);
    border-radius: var(--fc_radius_md, 12px);
    padding: 16px;
    margin-bottom: 20px;
}

.woocommerce-checkout .checkout_coupon #coupon_code {
    min-height: 48px;
    border: 1px solid var(--fc_color_border, #E1E5DF);
    border-radius: var(--fc_radius_md, 12px);
    padding: 8px 14px;
    font-size: 14px;
}

.woocommerce-checkout .checkout_coupon button {
    min-height: 48px;
    background-color: var(--fc_color_primary, #3F6234);
    border-radius: var(--fc_radius_md, 12px);
    color: var(--fc_color_surface, #FFFFFF);
    font-weight: 600;
    border: none;
    padding: 0 20px;
    transition: background-color var(--fc_transition_fast, 0.2s ease);
}

.woocommerce-checkout .checkout_coupon button:hover {
    background-color: var(--fc_color_secondary, #263C22);
}


/* ==============================================================
   BIODINO V7 - TRANG ĐẶT HÀNG THÀNH CÔNG
   (woocommerce/checkout/thankyou.php)
   ============================================================== */

.bd-thankyou {
    padding-bottom: var(--fc_space_6, 32px);
}

/* 1. Hero */
.bd-thankyou-hero {
    max-width: 720px;
    margin: 0 auto var(--fc_space_6, 32px);
    text-align: center;
}

.bd-thankyou-hero-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 96px;
    height: 96px;
    margin-bottom: var(--fc_space_5, 24px);
    border-radius: var(--fc_radius_pill, 999px);
    background-color: var(--fc_color_soft_green, #EEF5E8);
    color: var(--fc_color_primary, #3F6234);
}

.bd-thankyou-hero .section-kicker {
    margin-bottom: var(--fc_space_2, 8px);
}

.bd-thankyou-hero-title {
    margin: 0 0 var(--fc_space_4, 16px);
    padding: 0;
    font-size: 40px;
    font-weight: 800;
    line-height: 1.2;
    color: var(--fc_color_secondary, #263C22);
}

.bd-thankyou-hero-desc {
    margin: 0;
    font-size: 17px;
    line-height: 1.6;
    color: var(--fc_color_text_muted, #6B7569);
}

.bd-thankyou-hero-desc strong {
    font-weight: 700;
    color: var(--fc_color_heading, #263C22);
}

/* 2. Card thông tin */
.bd-thankyou-cards {
    margin-bottom: var(--fc_space_6, 32px);
}

.bd-thankyou-col {
    display: flex;
}

.bd-thankyou-card {
    flex: 1 1 auto;
    border: 1px solid var(--fc_color_border, #E1E5DF);
    border-radius: var(--fc_radius_lg, 16px);
    background-color: var(--fc_color_surface, #FFFFFF);
    padding: var(--fc_space_5, 24px) var(--fc_space_6, 32px);
}

.bd-thankyou-card-title {
    margin: 0 0 var(--fc_space_4, 16px);
    padding: 0 0 var(--fc_space_4, 16px);
    border-bottom: 1px solid var(--fc_color_border, #E1E5DF);
    font-size: 20px;
    font-weight: 800;
    line-height: 1.3;
    color: var(--fc_color_secondary, #263C22);
}

.bd-thankyou-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.bd-thankyou-list li {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--fc_space_4, 16px);
    padding: var(--fc_space_3, 12px) 0;
    border-bottom: 1px solid var(--fc_color_border, #E1E5DF);
    font-size: 15px;
}

.bd-thankyou-list li:last-child {
    padding-bottom: 0;
    border-bottom: 0;
}

.bd-thankyou-label {
    flex-shrink: 0;
    color: var(--fc_color_text_muted, #6B7569);
}

.bd-thankyou-value {
    text-align: right;
    font-weight: 600;
    color: var(--fc_color_secondary, #263C22);
}

.bd-thankyou-value-note {
    font-weight: 400;
    color: var(--fc_color_text_muted, #6B7569);
}

/* 3. Bước tiếp theo */
.bd-thankyou-steps {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--fc_space_4, 16px) var(--fc_space_5, 24px);
    margin: 0;
    padding: 0;
    list-style: none;
}

.bd-thankyou-steps li {
    display: flex;
    align-items: flex-start;
    gap: var(--fc_space_2, 8px);
    font-size: 15px;
    line-height: 1.5;
    color: var(--fc_color_text_muted, #6B7569);
}

.bd-thankyou-step-no {
    flex-shrink: 0;
    font-weight: 800;
    color: var(--fc_color_secondary, #263C22);
}

/* 4. Nút hành động */
.bd-thankyou-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: var(--fc_space_3, 12px);
}

.bd-thankyou-actions .btn-secondary-ui {
    height: 48px;
}

/* 5. Nội dung cổng thanh toán & plugin chèn thêm */
.bd-thankyou-payment-note {
    margin-top: var(--fc_space_5, 24px);
    padding: var(--fc_space_4, 16px) var(--fc_space_5, 24px);
    border: 1px solid var(--fc_color_border, #E1E5DF);
    border-radius: var(--fc_radius_lg, 16px);
    background-color: var(--fc_color_surface, #FFFFFF);
    color: var(--fc_color_text_muted, #6B7569);
    font-size: 15px;
    line-height: 1.6;
}

.bd-thankyou-payment-note p:last-child {
    margin-bottom: 0;
}

.bd-thankyou-extra {
    margin-top: var(--fc_space_5, 24px);
}

/* 6. Đơn bị từ chối thanh toán */
.bd-thankyou-failed {
    margin-bottom: var(--fc_space_5, 24px);
    padding: var(--fc_space_4, 16px) var(--fc_space_5, 24px);
    border-left: 3px solid var(--fc_color_warning_text, #684C1E);
    border-radius: var(--fc_radius_sm, 8px);
    background-color: var(--fc_color_warning, #F2BB5F);
}

.bd-thankyou-failed-text {
    margin: 0 0 var(--fc_space_4, 16px);
    color: var(--fc_body_color, #3C443B);
}

/* 7. Trường hợp không có đơn hàng */
.bd-thankyou-notice .woocommerce-notice {
    margin: 0;
    text-align: center;
    color: var(--fc_color_text_muted, #6B7569);
}


/* Order Details Container
--------------------------------------------------------------*/
.woocommerce-order-details {
    background: #EEE;
    padding: 10px 20px;
}

/* Order Tracking Notes
--------------------------------------------------------------*/
.note-order-tracking {
    list-style: none;
    padding: 0;
    position: relative;
    margin: 15px 0px;
}

.note-order-tracking:after {
    content: "";
    position: absolute;
    left: 165px;
    top: 0;
    width: 3px;
    height: 100%;
    background: #000;
}

.note-order-tracking .item-tracking-right {
    padding-left: 200px;
}

.note-order-tracking .item-tracking-description {
    background: #EEE;
    padding: 10px 15px;
}

.note-order-tracking .item-tracking-description:before {
    content: "";
    position: absolute;
    left: -41px;
    top: 0px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    border: 3px solid #000;
    background: #FFF;
    z-index: 1;
}

.note-order-tracking .item-tracking-left {
    border: 2px solid #000;
    padding: 5px 10px;
    border-radius: 5px;
}

.note-order-tracking li:last-child {
    padding-bottom: 0;
}

/* Responsive Design for Order Details
--------------------------------------------------------------*/

/* Purchase Note Style
--------------------------------------------------------------*/
.woocommerce-order-details .product-purchase-note {
    background: #fafafa;
}

/* My Account Layout
--------------------------------------------------------------*/
.woocommerce-account .row-my-account {
    margin-left: -10px;
    margin-right: -10px;
}

.woocommerce-account .woocommerce-form-register.register button {
    background: #000;
}

/* Dashboard Style
--------------------------------------------------------------*/
.woocommerce-account .account-row-dashboard {
    margin-left: -10px;
    margin-right: -10px;
}

.woocommerce-account .item-dashboard img {
    width: 50px;
    margin: 0px;
    max-width: 100%;
}

.woocommerce-account .item-dashboard-wrapper {
    background: #EEE;
}

.woocommerce-account h1 {
    margin-top: 25px;
}

.woocommerce-account .woocommerce-pagination-orders a {
    background: #000;
    padding: 5px 20px;
    margin: 0px 2px;
}

.woocommerce-account .item-dashboard {
    width: 20%;
}

/* Account Endpoint Title Style
--------------------------------------------------------------*/
.woocommerce-account .title-endpoint-account {
    border-bottom: 1px solid #000;
}

/* Edit Account Style
--------------------------------------------------------------*/
.woocommerce-account .row-edit-account {
    margin-left: -10px;
    margin-right: -10px;
}

.woocommerce-account .edit-account-wrapper {
    padding: 10px;
}

.woocommerce-account .my-account-address-wrapper,
.woocommerce-account .edit-account fieldset {
    border: 1px dashed #000;
    padding: 15px;
}

/* Edit Address Style
--------------------------------------------------------------*/
.woocommerce-account .row-my-account-address {
    margin-left: -10px;
    margin-right: -10px;
}

.woocommerce-account .my-account-address img {
    width: 20px;
    margin: 0px;
}

.woocommerce-account .address-my-account {
    background: #EEE;
}

.woocommerce-account .woocommerce-address-field-wrapper {
    margin-left: -10px;
    margin-right: -10px;
}

.woocommerce-account .woocommerce-address-field-wrapper .form-row {
    padding: 0px 10px 10px 10px;
    width: 50%;
    margin: 0px;
}

.woocommerce-account .woocommerce-address-field-wrapper label {
    display: block;
    margin-bottom: 5px;
}

/* Archive Product Orders
 --------------------------------------------------------------*/
ul.orderby-links {
    list-style: none;
    padding: 0;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    font-size: 12px;
}

ul.orderby-links li {
    display: inline-flex;
}

ul.orderby-links li a {
    text-decoration: none;
    color: #000;
    padding: 5px 10px;
    border: 1px solid #ccc;
    transition: background 0.3s, color 0.3s;
    margin: 2px 5px;
    display: inline-block;
    border-radius: 5px;
}

ul.orderby-links li.active a {
    background: #000;
    color: #fff;
    border-color: #000;
}

ul.orderby-links li a:hover {
    background: #000;
    color: #fff;
    border-color: #000;
}

/* Style price product
--------------------------------------------------------------*/
.template-price,
.template-price ins,
.template-price .price {
    color: #FF0000;
    font-weight: 600;
}

.template-price del {
    color: #666;
}

.template-price ins {
    text-decoration: none;
}

/* Sidebar mini cart empty
 --------------------------------------------------------------*/
.woocommerce-mini-cart__empty-message {
    padding: 15px;
    background: #ff8c002b;
    border-radius: 5px;
    font-size: 14px;
}

/* Sidebar Cart Drawer (Biodino v7 Design System)
-------------------------------------------------------------- */
#cart-sidebar {
    position: fixed;
    inset: 0;
    z-index: 99999;
    visibility: hidden;
    opacity: 0;
    transition: visibility 0.25s ease, opacity 0.25s ease;
}

#cart-sidebar.active {
    visibility: visible;
    opacity: 1;
}

/* Khóa cuộn trang khi drawer mở */
body.cart-sidebar-open {
    overflow: hidden;
}

#overlay-cart-sidebar {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 15, 0.45);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    cursor: pointer;
}

#cart-sidebar-content {
    position: absolute;
    top: 0;
    right: 0;
    height: 100%;
    width: 100%;
    max-width: 400px;
    background: var(--fc_color_surface, #FFFFFF);
    z-index: 2;
    transform: translateX(100%);
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    box-shadow: -8px 0 32px rgba(0, 0, 0, 0.12);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

#cart-sidebar.active #cart-sidebar-content {
    transform: translateX(0);
}

/* Header Drawer */
.bd-cart-sidebar-header {
    background: var(--fc_color_surface, #FFFFFF);
    border-bottom: 1px solid var(--fc_color_border, #E1E5DF);
}

.bd-cart-sidebar-badge {
    background-color: var(--fc_color_soft_green, #EEF5E8);
    color: var(--fc_color_primary, #3F6234);
    min-width: 24px;
    height: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--fc_radius_pill, 999px);
    font-size: 12px;
    font-weight: 700;
}

.bd-cart-sidebar-close {
    width: 36px;
    height: 36px;
    border-radius: var(--fc_radius_pill, 999px);
    color: var(--fc_body_color, #3C443B);
    transition: background-color 0.2s ease, color 0.2s ease;
}

.bd-cart-sidebar-close:hover {
    background-color: var(--fc_color_soft_green, #EEF5E8);
    color: var(--fc_color_primary, #3F6234);
}

/* Body Drawer & Mini Cart List */
#mini_sidebar_cart {
    flex: 1 1 auto;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--fc_color_border, #E1E5DF) transparent;
}

#mini_sidebar_cart::-webkit-scrollbar {
    width: 6px;
}

#mini_sidebar_cart::-webkit-scrollbar-thumb {
    background: var(--fc_color_border, #E1E5DF);
    border-radius: 999px;
}

.bd-mini-cart-item {
    border-bottom: 1px solid var(--fc_color_border, #E1E5DF);
    transition: opacity 0.2s ease;
}

.bd-mini-cart-item:last-child {
    border-bottom: none;
}

.bd-mini-cart-thumb {
    height: 64px;
    width: auto;
    max-width: 64px;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.bd-mini-cart-thumb a {
    height: 64px;
    width: auto;
    max-width: 64px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--fc_radius_sm, 8px);
    border: 1px solid var(--fc_color_border, #E1E5DF);
    overflow: hidden;
    background: transparent;
}

.bd-mini-cart-thumb .bd-mini-cart-img,
.bd-mini-cart-thumb img {
    height: 64px;
    width: auto;
    max-width: 64px;
    max-height: 64px;
    object-fit: contain;
    border-radius: inherit;
    border: none;
    background: transparent;
    display: block;
}

.bd-mini-cart-title {
    color: var(--fc_color_heading, #263C22);
    line-height: 1.35;
}

.bd-mini-cart-title a {
    color: var(--fc_color_heading, #263C22);
    transition: color 0.2s ease;
}

.bd-mini-cart-title a:hover {
    color: var(--fc_color_primary, #3F6234);
}

.bd-mini-cart-meta {
    font-size: 12px;
    color: var(--fc_color_text_muted, #6B7569);
    line-height: 1.4;
}

.bd-mini-cart-meta dl {
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.bd-mini-cart-meta dt {
    font-weight: 600;
}

.bd-mini-cart-meta dd {
    margin: 0 6px 0 0;
}

.bd-mini-cart-qty {
    color: var(--fc_color_text_muted, #6B7569);
}

.bd-mini-cart-price {
    color: var(--fc_color_danger, #C92A2A);
    font-weight: 700;
}

/* Nút Xóa Mini Cart Item */
.bd-mini-cart-remove {
    width: 32px;
    height: 32px;
    border-radius: var(--fc_radius_pill, 999px);
    color: var(--fc_color_text_muted, #6B7569);
    background: transparent;
    cursor: pointer;
    text-decoration: none;
    transition: background-color 0.2s ease, color 0.2s ease, transform 0.15s ease;
}

.bd-mini-cart-remove:hover {
    background-color: #FEE2E2;
    color: var(--fc_color_danger, #C92A2A);
    transform: scale(1.05);
}

/* Footer Drawer: Tổng tiền & Buttons */
.bd-mini-cart-footer {
    border-top: 1px solid var(--fc_color_border, #E1E5DF);
    background: var(--fc_color_surface, #FFFFFF);
}

.bd-mini-cart-footer .woocommerce-mini-cart__total.total {
    margin: 0;
    font-size: 14px;
    font-weight: 600;
    color: var(--fc_color_heading, #263C22);
}

.bd-mini-cart-footer .woocommerce-mini-cart__total.total strong {
    font-weight: 600;
    color: var(--fc_color_heading, #263C22);
}

.bd-mini-cart-footer .woocommerce-mini-cart__total.total .woocommerce-Price-amount {
    color: var(--fc_color_danger, #C92A2A);
    font-size: 18px;
    font-weight: 700;
}

.bd-btn-mini-checkout {
    background-color: var(--fc_color_primary, #3F6234);
    border: 1px solid var(--fc_color_primary, #3F6234);
    color: #FFFFFF;
    font-size: 14px;
    font-weight: 600;
    min-height: 44px;
    border-radius: var(--fc_radius_md, 12px);
    transition: background-color 0.2s ease, border-color 0.2s ease, transform 0.15s ease;
}

.bd-btn-mini-checkout:hover {
    background-color: var(--fc_color_secondary, #263C22);
    border-color: var(--fc_color_secondary, #263C22);
    color: #FFFFFF;
}

.bd-btn-mini-cart {
    background-color: var(--fc_color_surface, #FFFFFF);
    border: 1.5px solid var(--fc_color_border, #E1E5DF);
    color: var(--fc_color_primary, #3F6234);
    font-size: 14px;
    font-weight: 600;
    min-height: 44px;
    border-radius: var(--fc_radius_md, 12px);
    transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.bd-btn-mini-cart:hover {
    background-color: var(--fc_color_soft_green, #EEF5E8);
    border-color: var(--fc_color_primary, #3F6234);
    color: var(--fc_color_primary, #3F6234);
}

.bd-mini-cart-trust {
    border-top: 1px dashed var(--fc_color_border, #E1E5DF);
}

/* Empty State Mini Cart */
.bd-mini-cart-empty-icon {
    width: 64px;
    height: 64px;
    background-color: var(--fc_color_soft_green, #EEF5E8);
}

.bd-mini-cart-shop-now {
    background-color: var(--fc_color_primary, #3F6234);
    border: 1px solid var(--fc_color_primary, #3F6234);
    color: #FFFFFF;
    border-radius: var(--fc_radius_md, 12px);
    font-size: 14px;
    min-height: 44px;
}

.bd-mini-cart-shop-now:hover {
    background-color: var(--fc_color_secondary, #263C22);
    border-color: var(--fc_color_secondary, #263C22);
    color: #FFFFFF;
}

/* Style for add-to-cart form
--------------------------------------------------------------*/
.template-add-to-cart form.cart {
    display: flex;
    flex-direction: row;
    margin: 15px 0;
    padding: 10px 0px;
    flex-wrap: wrap;
}

.template-add-to-cart .template-add-to-cart {
    display: none !important;
}

/* Button disabled state
--------------------------------------------------------------*/
.template-add-to-cart form.cart .disabled {
    pointer-events: none;
    background: #666 !important;
}

/* Stock availability
--------------------------------------------------------------*/
.template-add-to-cart .stock.in-stock {
    font-weight: 600;
    margin-top: 10px;
}

/* Category and tags
--------------------------------------------------------------*/
.template-add-to-cart .product_meta .tagged_as,
.template-add-to-cart .product_meta .posted_in {
    margin-top: 15px;
}

.template-add-to-cart .product_meta .tagged_as a,
.template-add-to-cart .product_meta .posted_in a {
    background: #EEE;
    padding: 3px 10px;
    font-size: 13px;
    display: inline-block;
    margin: 2px;
}

.template-add-to-cart .product_meta .tagged_as a:hover,
.template-add-to-cart .product_meta .posted_in a:hover {
    background: #000;
    color: #FFF;
}

/* Quantity input styling
--------------------------------------------------------------*/
.template-add-to-cart form.cart .quantity {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.template-add-to-cart form.cart .quantity input.qty {
    width: 60px;
    height: 38px;
    text-align: center;
    border: 1px solid #ddd;
    margin-right: 5px;
}

/* Minus and Plus buttons styling
--------------------------------------------------------------*/
.template-add-to-cart form.cart .quantity .minus,
.template-add-to-cart form.cart .quantity .plus {
    background-color: #0071a1;
    color: #fff;
    padding: 0 15px;
    font-size: 18px;
    font-weight: bold;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    user-select: none;
    line-height: 40px;
}

/* Button for single add to cart
--------------------------------------------------------------*/
.template-add-to-cart a.button-external-product,
.template-add-to-cart button.single_add_to_cart_button {
    background-color: #000;
    color: #FFF;
    padding: 5px 20px;
    border: none;
    font-weight: 500;
    text-transform: uppercase;
    cursor: pointer;
    transition: background-color 0.3s ease;
    height: 38px;
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
}

/* Add to cart variations form
--------------------------------------------------------------*/
.template-add-to-cart form.cart .variations {
    width: 100%;
    border-collapse: collapse;
}

.template-add-to-cart form.cart .variations label {
    font-weight: 500;
}

/*Style reset table in product variations
--------------------------------------------------------------*/
.template-add-to-cart form.cart .variations th,
.template-add-to-cart form.cart .variations td {
    padding: 5px 10px;
    text-align: left;
}

.template-add-to-cart form.cart .variations select {
    width: 100%;
    padding: 8px;
    font-size: 14px;
    border: 1px solid #ddd;
    border-radius: 5px;
    outline: none !important;
    box-shadow: none !important;
}

/*Style reset variations
--------------------------------------------------------------*/
.template-add-to-cart form.cart .woocommerce-variation-add-to-cart {
    padding: 20px 0px 10px 0px;
}

.template-add-to-cart form.cart .variations td.td-reset-variations {
    text-align: right !important;
}

/*Style button reset variations button
--------------------------------------------------------------*/
.template-add-to-cart form.cart .variations td.td-reset-variations button.reset_variations {
    border: 0px;
    outline: none;
    background: #000;
    color: #FFF;
    font-size: 13px;
    padding: 5px 10px;
    border-radius: 5px;
}

/* Form add to cart group
--------------------------------------------------------------*/
.template-add-to-cart form.cart .group_table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 15px;
}

.template-add-to-cart form.cart .group_table th,
.template-add-to-cart form.cart .group_table td {
    padding: 10px;
    border-bottom: 1px solid #ddd;
    font-size: 14px;
    color: #333;
}

.template-add-to-cart form.cart .group_table input.qty {
    width: 60px;
    height: 40px;
    text-align: center;
    border: 1px solid #ddd;
    border-radius: 5px;
    font-size: 16px;
}

.template-add-to-cart .button-contact-product {
    background: #000;
    height: 38px;
    padding: 5px 20px;
}

/* Style Quick View Product
-------------------------------------------------------------- */
.quick-view-item-product {
    background: #000;
    color: #FFF;
    bottom: -50px;
    transition: all 0.3s;
}

/* Show quick view button on hover
--------------------------------------------------------------*/
.content-product-loop:hover .quick-view-item-product {
    bottom: 0px;
}

/* Style Quick View Product Modal
-------------------------------------------------------------- */
#quick-view-product-modal {
    display: none;
    z-index: 9999;
}

.close.toggle-quick-view-product {
    z-index: 1;
}

/* Active state for quick view modal
--------------------------------------------------------------*/
#quick-view-product-modal.active {
    display: flex;
}

/* Main container for quick view product
--------------------------------------------------------------*/
#quick-view-product-main {
    width: 95%;
    max-width: 900px;
    max-height: 90%;
    z-index: 1;
}

/* Overlay background for quick view product
--------------------------------------------------------------*/
#quick-view-product-overlay {
    background: #0000008f;
}

/* Hide reset variations button in the quick view modal
--------------------------------------------------------------*/
#quick-view-product-modal .reset_variations {
    display: none;
}

/* Style Tab woocommerce product attributes
-------------------------------------------------------------- */
.woocommerce-product-attributes {
    width: 100%;
    border-collapse: collapse;
    margin: 15px 0px;
}

.woocommerce-product-attributes th,
.woocommerce-product-attributes td {
    padding: 7px 10px;
    border: 1px solid #eee;
    text-align: left;
}

.woocommerce-product-attributes tr:nth-child(odd) {
    background-color: #f7f7f7;
}

.woocommerce-product-attributes tr:nth-child(even) {
    background-color: #ffffff;
}

.woocommerce-product-attributes th {
    font-weight: 600;
}

/* Style woocommerce review
-------------------------------------------------------------- */
.woocommerce-Reviews .review-breakdown:after,
.woocommerce-Reviews .review-average:after {
    content: "";
    position: absolute;
    right: 5px;
    width: 1px;
    height: 100%;
    border-right: 1px dashed #DDD;
    top: 0px;
}

.woocommerce-Reviews .number-review-breakdown,
.woocommerce-Reviews .label-review-breakdown {
    width: 50px;
}

.woocommerce-Reviews .item-review-breakdown {
    width: calc(100% - 100px);
    height: 10px;
    background: #ddd;
    border-radius: 5px;
}

.woocommerce-Reviews .item-review-breakdown div {
    background: #000;
}

.woocommerce-Reviews .review-breakdown ul,
.woocommerce-Reviews .review-breakdown ul li {
    list-style: none;
    margin: 0px;
    padding: 0px;
}

.woocommerce-Reviews .review-breakdown ul li {
    padding: 2px 0px;
}

.woocommerce-Reviews #open-review-modal {
    border: 0px;
    background: #000;
}

.woocommerce-Reviews .icon-review-star {
    width: 40px;
}

/* Style Reviews Modal */
.woocommerce-Reviews #review-modal {
    display: none;
    z-index: 99999;
}

.woocommerce-Reviews #review-overlay.active,
.woocommerce-Reviews #review-modal.active {
    display: flex;
}

.woocommerce-Reviews #review-modal #close-review-modal {
    z-index: 1;
}

.woocommerce-Reviews #title-review-modal {
    background: #000;
}

.woocommerce-Reviews #review-overlay {
    background: #000000a1;
}

.woocommerce-Reviews #review-content-modal {
    z-index: 1;
    max-width: 600px;
    max-height: 90%;
    margin: 20px;
    width: 95%;
}

.woocommerce-Reviews #review-modal .input-text {
    padding: 5px 15px;
    border: 1px solid #ccc;
    height: 40px;
    width: 100%;
    border-radius: 5px;
}

.woocommerce-Reviews #review-modal .input-text.input-error {
    border-color: #ff0000;
}

.woocommerce-Reviews #review-modal textarea.input-text {
    height: 100px;
    padding: 15px;
}

.woocommerce-Reviews #review-modal .input-text:focus {
    border-color: #0033a1;
    outline: none;
    box-shadow: 0px 0px 5px rgba(0, 51, 161, 0.5);
}

.woocommerce-Reviews #review-modal #submit-review-modal {
    background: #000;
    border: 0px;
}

.woocommerce-Reviews #review-modal #submit-review-modal img {
    width: 20px;
    filter: brightness(0) invert(1);
}

.woocommerce-Reviews #review-modal #review-star-product {
    display: flex;
    justify-content: center;
    gap: 5px;
    flex-direction: row-reverse;
}

/* Hide input radio
--------------------------------------------------------------*/
.woocommerce-Reviews #review-modal #review-star-product input {
    display: none;
}

.woocommerce-Reviews #review-modal #review-star-product label {
    padding-bottom: 20px;
    width: 50px;
    text-align: center;
    color: #666;
}

.woocommerce-Reviews #review-modal #review-star-product label span {
    font-size: 13px;
    bottom: 0px;
    left: 50%;
    transform: translate(-50%, 0);
    width: 70px;
    color: #000;
    white-space: nowrap;
    overflow: hidden;
}

.woocommerce-Reviews #review-modal #review-star-product label:before {
    content: '★';
}

.woocommerce-Reviews #review-modal #review-star-product input:checked~label,
.woocommerce-Reviews #review-modal #review-star-product label:hover,
.woocommerce-Reviews #review-modal #review-star-product label:hover~label {
    color: #f39c12;
}

/* Style list reviews product
--------------------------------------------------------------*/
.woocommerce-Reviews .list-reviews-product {
    list-style: none;
    padding: 0;
    margin: 0;
    width: 100%;
    position: relative;
}

.woocommerce-Reviews .list-reviews-product li {
    list-style: none;
    margin: 0px;
    padding: 10px 0px 10px 100px;
    position: relative;
}

.woocommerce-Reviews .list-reviews-product .comment_container {
    display: block;
    flex-direction: row;
    flex-wrap: wrap;
    width: 100%;
}

.woocommerce-Reviews .list-reviews-product .comment_container .comment-text {
    background: #eeeeeeb3;
    border: 1px dashed #DDD;
    padding: 10px 15px;
    border-radius: 5px;
}

.woocommerce-Reviews .list-reviews-product li img {
    position: absolute;
    border-radius: 5px;
    left: 0px;
    top: 10px;
}

.woocommerce-Reviews .list-reviews-product li .meta strong {
    font-weight: 600;
    text-transform: uppercase;
}

.woocommerce-Reviews .list-reviews-product li .meta .woocommerce-review__published-date {
    font-size: 13px;
    color: #666;
}

.star-rating {
    width: 100px;
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    overflow: hidden;
    margin-bottom: 5px;
    position: relative;
    height: 20px;
}

.star-rating span {
    position: relative;
    display: inline-flex;
    align-items: center;
    color: #f5c518;
    overflow: hidden;
    text-indent: -200px;
    height: 20px;
}

.star-rating:before,
.star-rating span:before {
    content: '\2605\2605\2605\2605\2605';
    position: absolute;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    letter-spacing: 0px;
    font-size: 20px;
    text-indent: 0px;
    line-height: 20px;
}

.star-rating:before {
    color: #333;
}

/*
Style Title Tabs Single Product
--------------------------------------------------------------*/
.title-tab-single-product {
    padding: 10px 0px;
    border-bottom: 1px solid #EEE;
    margin-bottom: 20px;
}

/* Style woocommerce product gallery
--------------------------------------------------------------*/
.woocommerce-product-gallery {
    text-align: center;
}

.woocommerce-product-gallery img {
    border: 1px solid #eee;
    border-radius: 5px;
    overflow: hidden;
}

.woocommerce-product-gallery .flex-control-nav img.flex-active {
    border: 1px solid #000;
}

/*
Style Single Product
--------------------------------------------------------------*/

/*
Style Buy Contact modal product
--------------------------------------------------------------*/
.modal-contact-us {
    z-index: 99999;
    display: none;
}

.modal-contact-us.active {
    display: flex;
}

.overlay-quick-contact-us {
    background: #00000069;
}

.content-quick-contact-us {
    width: 100%;
    max-width: 900px;
    margin: 20px;
    max-height: 90%;
    z-index: 1;
}

.close-quick-contact-us {
    z-index: 1;
}

.description-quick-contact-us {
    border-top: 1px solid #000;
}

.right-quick-contact-us .wpcf7-form .wpcf7-submit {
    width: 100%;
}

.button-quick-contact-us {
    gap: 10px;
}

.button-quick-contact-us a {
    background: #000;
}

.button-quick-contact-us img {
    filter: brightness(0) invert(1);
}

/*
Style Share Product Woocommerce
--------------------------------------------------------------*/
.share-single-product img {
    max-width: 30px;
}

.share-single-product .share-pinterest img {
    max-width: 25px;
}

.share-single-product .share-x img {
    max-width: 20px;
}

.share-single-product .share-message img {
    max-width: 27px;
}

/* ==========================================================================
   BIODINO PRODUCT ARCHIVE & FACETED FILTER SYSTEM (DESKTOP BASE)
   ========================================================================== */

/* Top Archive Header & Consultant CTA */
.archive-product-biodino {
    background-color: var(--fc_body_background_color, #FBFAF5);
    min-height: 80vh;
}

/* ==========================================================================
   Nhịp dọc Header danh mục — ép về thang 4px
   Lý do: .mb-1/.mb-2 trong default.css dùng thang 5px nên khoảng cách giữa
   kicker → mô tả bị giãn.
   ========================================================================== */
.shop-archive-header .shop-archive-kicker {
    letter-spacing: 0.06em;
    line-height: 1.2 !important;
    margin-bottom: 8px !important;
}

.shop-archive-header .shop-archive-desc {
    line-height: 1.5 !important;
    margin-bottom: 0 !important;
}

.shop-archive-header-action {
    display: flex !important;
    justify-content: flex-end !important;
    align-items: center !important;
    width: 100% !important;
}

.shop-archive-header-action .btn-guide-consultant {
    margin-left: auto !important;
}

.btn-guide-consultant {
    border: 1.5px solid var(--fc_color_secondary, #263C22) !important;
    border-radius: var(--fc_radius_sm, 8px) !important;
    background-color: var(--fc_color_surface, #FFFFFF) !important;
    color: var(--fc_color_secondary, #263C22) !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    padding: 9px 20px !important;
    line-height: 1.4 !important;
    text-decoration: none !important;
    white-space: nowrap !important;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
    box-shadow: var(--fc_shadow_sm, 0 1px 2px rgba(0, 0, 0, 0.04)) !important;
}

.btn-guide-consultant:hover {
    background-color: var(--fc_color_secondary, #263C22) !important;
    color: var(--fc_color_surface, #FFFFFF) !important;
    border-color: var(--fc_color_secondary, #263C22) !important;
    transform: translateY(-1px);
    box-shadow: var(--fc_shadow_md, 0 4px 12px rgba(38, 60, 34, 0.15)) !important;
}

/* Quick Filter Chips */
.quick-filter-chips {
    scrollbar-width: thin;
    scrollbar-color: var(--fc_color_border, #E1E5DF) transparent;
}

.quick-filter-chips::-webkit-scrollbar {
    height: 4px;
}

.quick-filter-chips::-webkit-scrollbar-thumb {
    background: var(--fc_color_border, #E1E5DF);
    border-radius: 4px;
}

.btn-chip-filter {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 44px !important;
    min-height: 44px !important;
    min-width: 44px !important;
    padding: 0 20px !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    line-height: 42px !important;
    border: 1px solid var(--fc_color_border, #E1E5DF) !important;
    background-color: var(--fc_color_surface, #FFFFFF) !important;
    color: var(--fc_body_color, #3C443B) !important;
    border-radius: var(--fc_radius_pill, 999px) !important;
    cursor: pointer !important;
    white-space: nowrap !important;
    box-sizing: border-box !important;
    transition: all 0.2s ease !important;
    box-shadow: none !important;
    text-decoration: none !important;
}

.btn-chip-filter:hover {
    background-color: var(--fc_body_background_color, #FBFAF5) !important;
    border-color: var(--fc_color_tertiary, #8EAE68) !important;
    color: var(--fc_color_heading, #263C22) !important;
}

.btn-chip-filter.is-active,
.btn-chip-filter.active,
.bd-chip-link.is-active,
.bd-chip-link.active {
    background-color: var(--fc_color_primary, #3F6234) !important;
    border-color: var(--fc_color_primary, #3F6234) !important;
    color: var(--fc_color_surface, #FFFFFF) !important;
    font-weight: 600 !important;
    box-shadow: 0 2px 8px rgba(63, 98, 52, 0.25) !important;
}

/* Faceted Sidebar Filter Card (Chuẩn Mockup Biodino) */
.sidebar-filter-card {
    background-color: var(--fc_color_surface, #FFFFFF) !important;
    border: 1px solid var(--fc_color_border, #E1E5DF) !important;
    border-radius: var(--fc_radius_lg, 16px) !important;
    padding: 18px 20px !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02) !important;
}

/* ==========================================================================
   Nhịp dọc Sidebar — ép về thang 4px của UI Kit (--fc_space_*)
   Lý do: hệ utility trong default.css dùng thang 5px (.pb-3 = 15px, .mb-2 = 10px…)
   nên cộng dồn nhiều utility sẽ giãn quá đà. Selector có .sidebar-filter-card
   nên thắng utility mà không cần !important.
   ========================================================================== */
.sidebar-filter-card .sidebar-desktop-header {
    padding-bottom: 12px;
    margin-bottom: 0;
}

.sidebar-filter-card .bd-sidebar-form-body {
    margin-top: 4px;
}

/* Khối header sidebar (desktop) — nhịp 4px, ghi đè utility py-3/pb-3 thang 5px */
.sidebar-filter-card .sidebar-header {
    padding-top: 0;
    padding-bottom: 12px;
    margin-bottom: 0;
}

/* Nhóm lọc: header 12px, danh sách sát header 4px */
.sidebar-filter-card .filter-group-header {
    padding: 12px 0;
}

.sidebar-filter-card .filter-group-body {
    padding-bottom: 12px;
}

.sidebar-filter-card .filter-group-body .filter-checkbox-list {
    margin-top: 4px;
}

/* Bỏ padding dọc thừa của item: label đã có min-height 44px (touch target) */
.sidebar-filter-card .filter-checkbox-list .filter-checkbox-item {
    padding-top: 0;
    padding-bottom: 0;
}

.sidebar-filter-card .filter-checkbox-item .custom-filter-label {
    margin-bottom: 0 !important;
}

/* Sidebar Desktop Header */
.sidebar-desktop-header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding-bottom: 14px !important;
    margin-bottom: 4px !important;
    border-bottom: 1px solid var(--fc_color_border, #E1E5DF) !important;
}

.sidebar-desktop-header .sidebar-title {
    font-size: 16px !important;
    font-weight: 700 !important;
    color: var(--fc_color_heading, #263C22) !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
}

.sidebar-desktop-header .bd-reset-filter {
    font-size: 13px !important;
    font-weight: 600 !important;
    color: var(--fc_color_text_muted, #6B7569) !important;
    text-decoration: none !important;
    cursor: pointer !important;
    transition: color 0.15s ease !important;
}

.sidebar-desktop-header .bd-reset-filter:hover {
    color: var(--fc_color_primary, #3F6234) !important;
    text-decoration: underline !important;
}

/* Nhóm Accordion */
.filter-group {
    border-bottom: 1px solid var(--fc_color_border, #E1E5DF) !important;
}

.filter-group:last-child {
    border-bottom: none !important;
}

.filter-group-header {
    padding: 13px 0 !important;
    cursor: pointer !important;
    user-select: none !important;
}

.filter-group-title {
    font-size: 14px !important;
    font-weight: 700 !important;
    color: var(--fc_color_heading, #263C22) !important;
    line-height: 1.4 !important;
}

.filter-group-header:hover .filter-group-title {
    color: var(--fc_color_primary, #3F6234) !important;
}

/* Icon Toggle: CSS Pure Plus (+) & Minus (—) Chuẩn Mockup */
.filter-group-toggle {
    width: 20px !important;
    height: 20px !important;
    position: relative !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
}

.filter-group-toggle img {
    display: none !important;
}

.filter-group-toggle::before,
.filter-group-toggle::after {
    content: '' !important;
    position: absolute !important;
    background-color: var(--fc_color_heading, #263C22) !important;
    transition: transform 0.2s ease, opacity 0.2s ease !important;
}

/* Thanh ngang (Minus) */
.filter-group-toggle::before {
    width: 12px !important;
    height: 1.5px !important;
}

/* Thanh dọc (Plus khi đóng, ẩn khi mở) */
.filter-group-toggle::after {
    width: 1.5px !important;
    height: 12px !important;
}

.filter-group.is-expanded .filter-group-toggle::after {
    transform: rotate(90deg) !important;
    opacity: 0 !important;
}

/* Flexbox Direction Utilities */
.flex-column {
    flex-direction: column !important;
}

.flex-row {
    flex-direction: row !important;
}

/* Custom Checkbox Chuẩn Mockup */
.custom-filter-label {
    min-height: 35px !important;
    display: flex !important;
    align-items: center !important;
    cursor: pointer !important;
    margin-bottom: 2px !important;
    user-select: none !important;
}

.custom-filter-label input[type="checkbox"] {
    position: absolute !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

.custom-checkbox-box {
    width: 16px !important;
    height: 16px !important;
    border-radius: 4px !important;
    border: 1.5px solid var(--fc_color_border, #E1E5DF) !important;
    background-color: var(--fc_color_surface, #FFFFFF) !important;
    position: relative !important;
    flex-shrink: 0 !important;
    margin-right: 10px !important;
    transition: all 0.15s ease !important;
}

.custom-filter-label:hover .custom-checkbox-box {
    border-color: var(--fc_color_primary, #3F6234) !important;
}

.custom-filter-label input[type="checkbox"]:checked+.custom-checkbox-box {
    background-color: var(--fc_color_primary, #3F6234) !important;
    border-color: var(--fc_color_primary, #3F6234) !important;
}

.custom-filter-label input[type="checkbox"]:checked+.custom-checkbox-box::after {
    content: '' !important;
    position: absolute !important;
    left: 4.5px !important;
    top: 1px !important;
    width: 4px !important;
    height: 8.5px !important;
    border: solid #FFFFFF !important;
    border-width: 0 2px 2px 0 !important;
    transform: rotate(45deg) !important;
}

.custom-checkbox-text {
    font-size: 14px !important;
    font-weight: 500 !important;
    color: var(--fc_body_color, #3C443B) !important;
    line-height: 1.4 !important;
}

.custom-filter-label input[type="checkbox"]:checked~.custom-checkbox-text {
    font-weight: 600 !important;
    color: var(--fc_color_heading, #263C22) !important;
}

/* Biodino Product Loop Grid & Card */
.archive-product-biodino ul.products {
    display: flex !important;
    flex-wrap: wrap !important;
    margin-left: -10px !important;
    margin-right: -10px !important;
    padding-left: 0 !important;
    list-style: none !important;
}

.archive-product-biodino ul.products::before,
.archive-product-biodino ul.products::after {
    display: none !important;
}

/* Faceted Filter & Main Layout Grid (Tuân thủ hệ thống 12 Cột: col-lg-3 và col-lg-9) */

.archive-product-biodino ul.products li.product {
    float: none !important;
    margin: 0 0 20px 0 !important;
    padding: 10px !important;
    box-sizing: border-box !important;
    display: flex !important;
    flex-direction: column !important;
    clear: none !important;
    flex: 0 0 33.333333% !important;
    max-width: 33.333333% !important;
    width: 33.333333% !important;
}

.product-card-biodino {
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
    width: 100% !important;
    border: 1px solid var(--fc_color_border, #E1E5DF) !important;
    border-radius: var(--fc_radius_lg, 16px) !important;
    background-color: var(--fc_color_surface, #FFFFFF) !important;
    padding: 16px !important;
    box-sizing: border-box !important;
    transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.25s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.25s ease !important;
}

.product-card-biodino:hover {
    transform: translateY(-4px) !important;
    box-shadow: 0 12px 24px rgba(38, 60, 34, 0.08) !important;
    border-color: var(--fc_color_tertiary, #8EAE68) !important;
}

/* Khung ảnh sản phẩm: tỉ lệ dẹp 4:3 — ảnh sản phẩm đặt nhỏ, căn giữa khung */
.product-card-thumb {
    width: 100% !important;
    aspect-ratio: 4 / 3 !important;
    border-radius: var(--fc_radius_md, 12px) !important;
    overflow: hidden !important;
    background-color: var(--fc_color_soft_green, #EEF5E8) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin-bottom: 12px !important;
    position: relative !important;
    flex-shrink: 0 !important;
}

.product-card-thumb a {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    height: 100% !important;
    padding: 8px !important;
}

/* Ảnh sản phẩm thu nhỏ, căn giữa khung xanh.
   KHÔNG đặt background-color / box-shadow lên <img> vì ảnh PNG nền trong suốt
   sẽ bị lộ thành khung/halo trắng bao quanh sản phẩm. */
.product-card-thumb img,
.product-thumb-img {
    max-width: 46%;
    max-height: 80%;
    width: auto;
    height: auto;
    object-fit: contain !important;
    background-color: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.product-card-biodino:hover .product-card-thumb img,
.product-card-biodino:hover .product-thumb-img {
    transform: translateY(-3px) scale(1.04) !important;
}

/* Kicker: metadata nhỏ — min 12px theo Mục 4.3 v7.md; nhịp margin theo thang 4px */
.product-card-kicker {
    font-size: 12px !important;
    font-weight: 700 !important;
    line-height: 1.4 !important;
    text-transform: uppercase !important;
    color: var(--fc_color_primary, #3F6234) !important;
    letter-spacing: 0.5px !important;
    margin-bottom: 4px !important;
    flex-shrink: 0 !important;
}

/* Tiêu đề 2 dòng cố định -> mọi card trong hàng thẳng hàng */
.product-card-title {
    font-size: 16px !important;
    font-weight: 700 !important;
    line-height: 1.4 !important;
    color: var(--fc_color_heading, #263C22) !important;
    margin-bottom: 8px !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    min-height: 45px !important;
    flex-shrink: 0 !important;
}

.product-card-title a {
    color: inherit;
    text-decoration: none;
}

.product-card-title a:hover {
    color: var(--fc_color_primary, #3F6234);
}

/* Mô tả ngắn 2 dòng cố định — nội dung chữ tối thiểu 14px (Mục 4.3 v7.md) */
.product-card-suitable {
    font-size: 14px !important;
    line-height: 1.5 !important;
    color: var(--fc_color_text_muted, #6B7569) !important;
    margin-bottom: 12px !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    min-height: 42px !important;
    flex-shrink: 0 !important;
}

/* Khối giá: nhịp 12px / 16px theo thang 4px */
.product-card-price-row {
    margin-top: auto !important;
    padding-top: 12px !important;
    margin-bottom: 16px !important;
    border-top: none !important;
    flex-shrink: 0 !important;
}

.product-card-price {
    font-size: 18px !important;
    font-weight: 700 !important;
    color: var(--fc_color_heading, #263C22) !important;
    margin-bottom: 0 !important;
}

.product-card-price ins,
.product-card-price .amount {
    color: var(--fc_color_heading, #263C22) !important;
    text-decoration: none !important;
}

.product-card-price del {
    color: var(--fc_color_text_muted, #6B7569) !important;
    font-size: 13px !important;
    margin-right: 6px !important;
}

.product-card-unit-price {
    font-size: 12px !important;
    color: var(--fc_color_text_muted, #6B7569) !important;
    font-weight: 500 !important;
}

.product-card-cta {
    width: 100% !important;
}

.btn-view-product {
    width: 100% !important;
    height: 44px !important;
    min-height: 44px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: var(--fc_radius_sm, 8px) !important;
    background-color: var(--fc_color_primary, #3F6234) !important;
    border: 1px solid var(--fc_color_primary, #3F6234) !important;
    color: #FFFFFF !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    white-space: nowrap !important;
    box-sizing: border-box !important;
    transition: background-color 0.2s ease, transform 0.2s ease !important;
}

.btn-view-product:hover {
    background-color: var(--fc_color_secondary, #263C22) !important;
    border-color: var(--fc_color_secondary, #263C22) !important;
    color: #FFFFFF !important;
}

/* Toolbar & Ordering Dropdown */
.product-loop-toolbar {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    flex-wrap: wrap !important;
    gap: 12px !important;
    margin-bottom: 16px !important;
    padding-bottom: 12px !important;
    border-bottom: 1px solid var(--fc_color_border, #E1E5DF) !important;
}

.bd-ordering-wrapper {
    position: relative;
    display: inline-flex;
    align-items: center;
}

.bd-orderby-select {
    appearance: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    background-color: var(--fc_color_surface, #FFFFFF) !important;
    border: 1px solid var(--fc_color_border, #E1E5DF) !important;
    border-radius: var(--fc_radius_sm, 8px) !important;
    height: 44px !important;
    min-height: 44px !important;
    line-height: 42px !important;
    padding: 0 36px 0 14px !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    color: var(--fc_body_color, #3C443B) !important;
    cursor: pointer !important;
    outline: none !important;
    box-sizing: border-box !important;
    transition: border-color 0.15s ease, box-shadow 0.15s ease !important;
}

.bd-orderby-select:hover,
.bd-orderby-select:focus {
    border-color: var(--fc_color_primary, #3F6234) !important;
    box-shadow: 0 1px 3px rgba(38, 60, 34, 0.08) !important;
}

/* AJAX Products Container */
#shop-products-container {
    transition: opacity 0.25s ease;
}

/* Biodino Filter Base Styles */
.bd-chip-link.is-active,
.btn-chip-filter.is-active {
    background-color: var(--fc_color_primary, #3F6234);
    border-color: var(--fc_color_primary, #3F6234);
    color: #FFFFFF;
    font-weight: 600;
    box-shadow: 0 4px 12px rgba(63, 98, 52, 0.2);
}

.filter-checkbox-item.is-disabled {
    opacity: 0.4;
    cursor: not-allowed;
    pointer-events: none;
}

.filter-checkbox-item.is-disabled .custom-filter-label {
    cursor: not-allowed;
}

/* noUiSlider Biodino Styling
   LƯU Ý THỨ TỰ NẠP: `assets/css/nouislider.min.css` được enqueue SAU `theme-woocommerce.css`
   (xem frontendFC.php), nên rule gốc của thư viện `.noUi-horizontal .noUi-handle`
   có CÙNG specificity (0,2,0) và thắng theo thứ tự nguồn -> tay kéo bị 34x28px hình bầu dục.
   Vì vậy mọi rule tay kéo ở đây phải nâng specificity lên (0,3,0):
   `.bd-price-range-slider.noUi-target .noUi-handle`. */
.bd-price-range-slider.noUi-target {
    background: var(--fc_color_border, #E1E5DF);
    border: none;
    border-radius: var(--fc_radius_pill, 999px);
    box-shadow: none;
    height: 6px;
    /* Chừa 22px mỗi bên để tay kéo 44px không thò ra ngoài khung */
    margin: 14px 22px 18px;
    cursor: pointer;
}

.bd-price-range-slider .noUi-connect {
    background: var(--fc_color_primary, #3F6234);
    border-radius: var(--fc_radius_pill, 999px);
}

/* Vùng chạm 44x44 (v7.md §4.3) nhưng chỉ VẼ điểm tròn 18px bằng ::before */
.bd-price-range-slider.noUi-target .noUi-handle {
    width: 44px;
    height: 44px;
    right: -22px;
    top: -19px;
    background: transparent;
    border: none;
    border-radius: var(--fc_radius_pill, 999px);
    box-shadow: none;
    cursor: grab;
}

.bd-price-range-slider.noUi-target .noUi-handle::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--fc_color_surface, #FFFFFF);
    border: 2.5px solid var(--fc_color_primary, #3F6234);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

/* Thư viện dùng ::after để vẽ vạch kẻ trang trí -> ẩn */
.bd-price-range-slider.noUi-target .noUi-handle::after {
    display: none;
}

.bd-price-range-slider.noUi-target .noUi-handle:active {
    cursor: grabbing;
}

.bd-price-range-slider.noUi-target .noUi-handle:active::before {
    transform: translate(-50%, -50%) scale(1.15);
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.22);
}

.bd-price-range-slider.noUi-target .noUi-handle:focus-visible {
    outline: none;
}

.bd-price-range-slider.noUi-target .noUi-handle:focus-visible::before {
    outline: 3px solid rgba(142, 174, 104, 0.35);
    outline-color: color-mix(in srgb, var(--fc_color_tertiary, #8EAE68) 35%, transparent);
}

/* Khung Slider + 2 ô nhập giá
   Trước đây các class này KHÔNG có rule nào nên hàng ô nhập bị tràn: `<input type="number">`
   có min-width nội tại lớn, thiếu `min-width: 0` thì flex item không co lại được. */
.bd-price-slider-wrap {
    padding-left: 0;
    padding-right: 0;
}

.bd-price-inputs-row {
    display: flex;
    align-items: center;
    gap: var(--fc_space_2, 8px);
}

.bd-price-input-box {
    flex: 1 1 0;
    min-width: 0;
}

.bd-input-price {
    width: 100%;
    min-height: 44px;
    padding: 8px 12px;
    border: 1px solid var(--fc_color_border, #E1E5DF);
    border-radius: var(--fc_radius_md, 12px);
    background-color: var(--fc_color_surface, #FFFFFF);
    color: var(--fc_body_color, #3C443B);
    font-size: 13px;
    font-family: inherit;
    box-sizing: border-box;
    /* Ẩn mũi tên tăng/giảm của input number cho gọn */
    -moz-appearance: textfield;
    appearance: textfield;
}

.bd-input-price::-webkit-outer-spin-button,
.bd-input-price::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.bd-input-price:focus {
    border-color: var(--fc_color_primary, #3F6234);
    outline: 3px solid rgba(142, 174, 104, 0.18);
    outline-color: color-mix(in srgb, var(--fc_color_tertiary, #8EAE68) 18%, transparent);
}

.bd-input-price::placeholder {
    color: var(--fc_color_text_muted, #6B7569);
}

.bd-price-separator {
    flex-shrink: 0;
    line-height: 1;
}

/* Trạng thái 0 kết quả (Mục 10.3 sanpham.md) */
.bd-empty-products {
    padding-left: 20px;
    padding-right: 20px;
}

.bd-empty-products .empty-icon {
    width: 72px;
    height: 72px;
    background-color: var(--fc_color_soft_green, #EEF5E8);
    color: var(--fc_color_primary, #3F6234);
}

.bd-empty-products .empty-title {
    color: var(--fc_color_heading, #263C22);
}

.bd-empty-products .empty-actions .btn {
    min-height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* Loading state */
.bd-results.is-loading {
    opacity: 0.5;
    pointer-events: none;
    transition: opacity 0.2s ease;
}

/* Số đếm facet BẮT BUỘC hiển thị cạnh mỗi checkbox (Bất biến Parity Test - Mục 6.3 sanpham.md) */
.filter-checkbox-item .bd-count {
    font-weight: 600;
}

/* Mobile Drawer Base Desktop Styles (Hidden by default on Desktop) */
.btn-toggle-mobile-filter {
    display: none !important;
}

.bd-drawer-backdrop {
    display: none !important;
}

.bd-drawer-header {
    display: none !important;
}

.bd-drawer-footer {
    display: none !important;
}

.badge-filter-count {
    background-color: var(--fc_color_primary, #3F6234);
    color: #FFFFFF;
    border-radius: var(--fc_radius_pill, 999px);
    font-size: 12px;
    font-weight: 700;
}

.btn-apply-mobile-filter {
    background-color: var(--fc_color_primary, #3F6234);
    border-color: var(--fc_color_primary, #3F6234);
    color: #FFFFFF;
    transition: background-color 0.2s ease;
}

.btn-apply-mobile-filter:hover {
    background-color: var(--fc_color_secondary, #263C22);
    border-color: var(--fc_color_secondary, #263C22);
    color: #FFFFFF;
}

/* Nút đóng Drawer — chuẩn Biodino Icon System V1 (icon 20px, vùng bấm 44x44) */
.bd-drawer-close {
    width: 44px;
    height: 44px;
    min-width: 44px;
    padding: 0;
    border: 0;
    background-color: transparent;
    color: var(--fc_color_text_muted, #6B7569);
    transition: color 0.15s ease, background-color 0.15s ease;
}

.bd-drawer-close:hover,
.bd-drawer-close:focus-visible {
    color: var(--fc_color_primary, #3F6234);
    background-color: var(--fc_color_soft_green, #EEF5E8);
}

/* ==========================================================================
   BIODINO SINGLE PRODUCT v7 - DESKTOP BASE STYLES
   TUYỆT ĐỐI 0 @media trong file này. 100% Responsive nằm tại responsive.css.
   ========================================================================== */

/* 1. Container & Hero Layout
   -------------------------------------------------------------------------- */
.bd-single-product-container {
    max-width: 1240px;
    margin-left: auto;
    margin-right: auto;
}

.bd-single-hero {
    --bs-gutter-x: 2.5rem;
}

/* 2. Gallery Component (Desktop: Thumbnails Dọc bên trái, Ảnh chính bên phải)
   -------------------------------------------------------------------------- */
.bd-single-gallery-container {
    display: flex;
    gap: 16px;
    /* KHÔNG dùng `stretch`: cột thumbnail sẽ bị kéo cao bằng khung ảnh chính,
       tạo ra một khối trống lớn bên dưới các thumbnail (chỉ 2-3 ảnh). */
    align-items: flex-start;
    width: 100%;
}

/* Cột Thumbnails dọc bên trái: cao đúng theo số ảnh, canh từ trên xuống */
.bd-gallery-thumbs-col {
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 88px;
    flex-shrink: 0;
    align-self: flex-start;
    height: auto;
    max-height: 100%;
}

.bd-gallery-thumb-btn {
    width: 84px;
    height: 92px;
    background-color: var(--fc_color_surface, #FFFFFF);
    border: 1.5px solid var(--fc_color_border, #E1E5DF);
    border-radius: var(--fc_radius_md, 12px);
    cursor: pointer;
    transition: all 0.2s ease-in-out;
    padding: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.bd-gallery-thumb-btn:hover {
    border-color: var(--fc_color_primary, #3F6234);
    box-shadow: 0 2px 8px rgba(63, 98, 52, 0.08);
}

.bd-gallery-thumb-btn.active {
    border: 2px solid var(--fc_color_primary, #3F6234);
    box-shadow: 0 0 0 1px var(--fc_color_primary, #3F6234);
    background-color: var(--fc_color_surface, #FFFFFF);
}

.bd-thumb-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

/*
 * Cột thumbnail: HIỆN ở desktop/tablet (cột dọc bên trái khung ảnh).
 * Ở MOBILE (≤ 767.98px) cột này bị ẩn bằng media query trong `responsive.css`.
 */

/* Nút điều hướng ảnh trước / sau (đặt đè lên khung ảnh) */
.bd-gallery-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 5;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 1px solid var(--fc_color_border, #E1E5DF);
    border-radius: var(--fc_radius_pill, 999px);
    background-color: var(--fc_color_surface, #FFFFFF);
    color: var(--fc_color_primary, #3F6234);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.bd-gallery-nav:hover {
    background-color: var(--fc_color_soft_green, #EEF5E8);
    border-color: var(--fc_color_primary, #3F6234);
}

.bd-gallery-nav:focus-visible {
    outline: 2px solid var(--fc_color_primary, #3F6234);
    outline-offset: 2px;
}

.bd-gallery-nav-prev {
    left: 12px;
}

.bd-gallery-nav-next {
    right: 12px;
}

/* Icon chevron-right dùng cho cả 2 nút; nút prev lật ngược */
.bd-nav-icon-flip {
    transform: rotate(180deg);
}

/* Chấm chỉ số ảnh (đặt ở đáy khung) */
.bd-gallery-dots {
    position: absolute;
    left: 50%;
    bottom: 14px;
    transform: translateX(-50%);
    z-index: 5;
    display: flex;
    align-items: center;
    gap: 8px;
}

.bd-gallery-dot {
    width: 44px;
    height: 44px;
    padding: 0;
    border: 0;
    background: transparent;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

/* Chấm tròn thật nằm trong ::before để vùng bấm đạt 44x44 (Mục 4.3) */
.bd-gallery-dot::before {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: var(--fc_radius_pill, 999px);
    background-color: var(--fc_color_border, #E1E5DF);
    transition: background-color 0.15s ease, width 0.15s ease;
}

.bd-gallery-dot.active::before {
    background-color: var(--fc_color_primary, #3F6234);
    width: 22px;
}

.bd-gallery-dot:focus-visible {
    outline: 2px solid var(--fc_color_primary, #3F6234);
    outline-offset: -6px;
    border-radius: var(--fc_radius_pill, 999px);
}

/* Khung Ảnh Chính Nền Xanh Leaf Soft Bên Phải */
.bd-gallery-main-frame {
    background-color: var(--fc_color_soft_green, #EEF5E8);
    border-radius: var(--fc_radius_lg, 16px);
    /*
     * BẮT BUỘC khai báo flex tường minh: nếu chỉ dựa vào class `.flex-grow-1`
     * trong HTML thì rule này (nạp sau) reset về `flex: 0 1 auto` khiến khung
     * KHÔNG giãn hết cột gallery (thừa ~59px bên phải).
     */
    flex: 1 1 auto;
    min-width: 0;
    min-height: 560px;
    aspect-ratio: 5 / 6;
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(63, 98, 52, 0.1);
    outline: none;
}

.bd-gallery-main-frame:focus-visible {
    outline: 2px solid var(--fc_color_primary, #3F6234);
    outline-offset: -2px;
}

/* Slide ảnh chính: lề trong rộng để ảnh "nổi" trên nền xanh.
   Padding 80px chỉ hợp lý ở desktop (khung ~522px). Các breakpoint nhỏ hơn
   được giảm dần trong responsive.css để ảnh không bị bóp quá nhỏ. */
.bd-gallery-main-slide {
    width: 100%;
    height: 100%;
    padding: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/*
 * Ảnh packshot chính.
 * Dùng `max-width/max-height: 100%` + `width/height: auto` để ảnh TỰ vừa khung
 * theo cả 2 chiều (không bị tràn khi khung có chiều cao tường minh).
 * Base `width: 100%` buộc ảnh nhỏ hơn khung được phóng to lấp đầy bề ngang.
 */
.bd-main-packshot {
    width: 100%;
    height: auto;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    filter: drop-shadow(0 15px 30px rgba(0, 0, 0, 0.12));
    transition: opacity 0.25s ease, transform 0.25s ease;
}

/* Native Flexslider fallback styles */
.bd-single-gallery-col .woocommerce-product-gallery {
    position: relative;
    display: flex;
    flex-direction: row-reverse;
    gap: 16px;
    align-items: flex-start;
}

.bd-single-gallery-col .woocommerce-product-gallery__wrapper {
    flex: 1 1 auto;
    margin: 0;
    padding: 0;
    border-radius: var(--fc_radius_lg, 16px);
    overflow: hidden;
    background-color: var(--fc_color_soft_green, #EEF5E8);
    border: 1px solid rgba(63, 98, 52, 0.1);
}

.bd-single-gallery-col .woocommerce-product-gallery__image {
    background-color: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
}

.bd-single-gallery-col .woocommerce-product-gallery__image img {
    width: auto;
    max-height: 440px;
    object-fit: contain;
    display: block;
    filter: drop-shadow(0 15px 30px rgba(0, 0, 0, 0.12));
}

.bd-single-gallery-col .flex-control-thumbs {
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 76px;
    flex-shrink: 0;
    margin: 0;
    padding: 0;
    list-style: none;
}

.bd-single-gallery-col .flex-control-thumbs li {
    width: 76px;
    height: 84px;
    border-radius: var(--fc_radius_md, 12px);
    overflow: hidden;
    border: 1.5px solid var(--fc_color_border, #E1E5DF);
    cursor: pointer;
    background-color: var(--fc_color_surface, #FFFFFF);
    transition: all 0.2s ease-in-out;
}

.bd-single-gallery-col .flex-control-thumbs li img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    opacity: 0.8;
    transition: opacity 0.2s ease;
}

.bd-single-gallery-col .flex-control-thumbs li img.flex-active,
.bd-single-gallery-col .flex-control-thumbs li:hover img {
    opacity: 1;
}

.bd-single-gallery-col .flex-control-thumbs li.flex-active,
.bd-single-gallery-col .flex-control-thumbs li:has(img.flex-active) {
    border: 2px solid var(--fc_color_primary, #3F6234);
    box-shadow: 0 0 0 1px var(--fc_color_primary, #3F6234);
}

/* Nút trigger phóng to Lightbox */
.bd-single-gallery-col .woocommerce-product-gallery__trigger {
    position: absolute;
    top: 14px;
    right: 14px;
    z-index: 10;
    width: 36px;
    height: 36px;
    border-radius: var(--fc_radius_pill, 999px);
    background-color: rgba(255, 255, 255, 0.9);
    border: 1px solid var(--fc_color_border, #E1E5DF);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

/* 3. Summary Cột Phải
   -------------------------------------------------------------------------- */
.bd-single-summary {
    padding-left: 8px;
}

.bd-single-kicker {
    letter-spacing: 0.06em;
}

.bd-single-summary .product_title {
    font-size: 28px;
    line-height: 1.35;
    font-weight: 700;
    color: var(--fc_color_heading, #263C22);
    margin-bottom: 6px;
}

.bd-single-subtitle {
    font-size: 14px;
    line-height: 1.5;
    color: var(--fc_color_text_muted, #6B7569);
    margin-bottom: 16px;
}

/* Box "Phù hợp khi" (Single Product - Nằm giữa Subtitle và Price) */
.bd-suitable-box {
    display: flex;
    align-items: flex-start;
    gap: 24px;
    padding: 16px 20px;
    background-color: var(--fc_color_soft_green, #EEF5E8);
    border: 1px solid var(--fc_color_border, #E1E5DF);
    border-radius: var(--fc_radius_lg, 16px);
    margin-bottom: 20px;
}

.bd-suitable-box .bd-suitable-label {
    flex: 0 0 auto;
    width: 110px;
    font-size: 15px;
    font-weight: 700;
    color: var(--fc_color_heading, #263C22);
    line-height: 1.5;
    margin: 0;
}

.bd-suitable-box .bd-suitable-body {
    flex: 1 1 auto;
    min-width: 0;
}

.bd-suitable-box .bd-suitable-content {
    font-size: 14.5px;
    line-height: 1.55;
    color: var(--fc_body_color, #3C443B);
    margin-bottom: 8px;
}

.bd-suitable-box .bd-suitable-content p {
    margin: 0 0 6px 0;
    line-height: 1.55;
}

.bd-suitable-box .bd-suitable-content p:last-child {
    margin-bottom: 0;
}

.bd-suitable-box .bd-scroll-link {
    font-size: 14px;
    font-weight: 700;
    color: var(--fc_color_primary, #3F6234);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    /* Touch target >= 44px (v7.md §4.3) — nới bằng padding, bù margin âm để không phá nhịp */
    min-height: 44px;
    padding-top: 9px;
    padding-bottom: 9px;
    margin-top: -9px;
    margin-bottom: -9px;
    transition: color 0.15s ease;
}

.bd-suitable-box .bd-scroll-link:hover {
    color: var(--fc_color_secondary, #263C22);
}

.bd-suitable-box .bd-scroll-arrow {
    display: inline-block;
    transition: transform 0.2s ease;
}

.bd-suitable-box .bd-scroll-link:hover .bd-scroll-arrow {
    transform: translateY(2px);
}

/* Giá bán & Đơn vị tính */
.bd-single-summary .price {
    font-size: 26px;
    font-weight: 700;
    color: var(--fc_color_primary, #3F6234);
    margin-bottom: 4px;
    display: flex;
    align-items: baseline;
    gap: 8px;
}

.bd-single-summary .price del {
    font-size: 16px;
    color: var(--fc_color_text_muted, #6B7569);
    font-weight: 400;
}

.bd-single-summary .price ins {
    text-decoration: none;
    color: var(--fc_color_primary, #3F6234);
}

.bd-price-unit-wrapper {
    border-bottom: 1px solid var(--fc_color_border, #E1E5DF);
    padding-bottom: 16px;
}

.bd-stock-dot {
    font-size: 12px;
}

.bd-savings-badge {
    background-color: var(--fc_color_soft_green, #EEF5E8);
    border: 1px solid rgba(63, 98, 52, 0.2);
    border-radius: var(--fc_radius_sm, 6px);
}

/* Swatches dạng Chip Radiogroup (Single Product - Chuẩn Hình 2) */
.bd-swatch-group {
    width: 100%;
    margin-bottom: 20px;
}

.bd-swatch-header {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
}

.bd-swatch-title {
    font-size: 14px;
    font-weight: 700;
    color: var(--fc_color_heading, #263C22);
    letter-spacing: 0.04em;
}

.bd-size-guide-link {
    font-size: 14px;
    font-weight: 600;
    color: var(--fc_color_primary, #3F6234);
    /* Touch target >= 44px (v7.md §4.3) */
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding-left: 4px;
    padding-right: 4px;
    margin-left: -4px;
    margin-right: -4px;
    transition: color 0.15s ease;
}

.bd-size-guide-link:hover {
    color: var(--fc_color_secondary, #263C22);
}

.bd-swatch-items {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.bd-swatch-item {
    height: 44px;
    min-height: 44px;
    min-width: 52px;
    padding: 0 18px;
    background-color: var(--fc_color_surface, #FFFFFF);
    border: 1.5px solid var(--fc_color_border, #E1E5DF);
    border-radius: var(--fc_radius_md, 10px);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    cursor: pointer;
    transition: all 0.15s ease-in-out;
    user-select: none;
    box-shadow: none;
}

.bd-swatch-item:hover {
    border-color: var(--fc_color_primary, #3F6234);
}

.bd-swatch-item .bd-swatch-label {
    font-size: 15px;
    font-weight: 700;
    color: var(--fc_color_heading, #263C22);
    line-height: 1;
}

.bd-swatch-item.active {
    border-color: var(--fc_color_primary, #3F6234);
    background-color: var(--fc_color_soft_green, #EEF5E8);
    box-shadow: 0 0 0 1px var(--fc_color_primary, #3F6234);
}

.bd-swatch-item.active .bd-swatch-label {
    color: var(--fc_color_heading, #263C22);
}

/* Badge ĐANG CHỌN hiển thị bên cạnh Size */
.bd-swatch-badge-active {
    font-size: 12px;
    font-weight: 700;
    color: var(--fc_color_heading, #263C22);
    letter-spacing: 0.04em;
    display: inline-block;
    line-height: 1;
}

.bd-swatch-item:not(.active) .bd-swatch-badge-active {
    display: none !important;
}

.bd-swatch-item.is-disabled {
    opacity: 0.38;
    cursor: pointer;
    text-decoration: line-through;
    border-style: dashed;
}

/*
 * Hộp ghi chú "Giao cho người thân?".
 *
 * BẮT BUỘC `width: 100%` + `flex: 1 1 100%`: đây là flex item của `form.cart`,
 * nếu để mặc định (`flex: 0 1 auto`) hộp chỉ co theo nội dung chứ không giãn
 * hết chiều ngang form.
 *
 * MÀU THEO ĐÚNG VAI TRÒ TOKEN (v7.md Mục 4.1):
 *   - Nền          : --fc_color_warning       (chủ shop đặt màu kem nhạt)
 *   - Viền/nhấn    : --fc_color_warning_text  (Care Sun — vàng)
 *   - Tiêu đề      : --fc_color_heading       (đậm, cùng tông chữ chính)
 *   - Chữ nội dung : --fc_body_color          (màu chữ thân bài)
 *
 * LƯU Ý: KHÔNG dùng --fc_color_warning_text cho CHỮ. Token này chỉ dành cho
 * viền/nhấn; chủ shop đặt nó là màu vàng nên chữ sẽ không đọc được.
 */
.bd-delivery-note {
    width: 100%;
    flex: 1 1 100%;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px;
    margin-bottom: 16px;
    background-color: var(--fc_color_warning, #F2BB5F);
    border: 1px solid var(--fc_color_warning_text, #684C1E);
    border-left: 3px solid var(--fc_color_warning_text, #684C1E);
    border-radius: var(--fc_radius_sm, 8px);
    color: var(--fc_body_color, #3C443B);
}

.bd-delivery-icon-wrap {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-top: 2px;
    color: var(--fc_color_heading, #263C22);
}

.bd-delivery-text-wrap {
    font-size: 13px;
    line-height: 1.5;
    min-width: 0;
}

.bd-delivery-title {
    font-weight: 700;
    margin: 0 0 4px;
    color: var(--fc_color_heading, #263C22);
}

.bd-delivery-desc {
    margin: 0;
    color: var(--fc_body_color, #3C443B);
}

/* Form Mua Hàng & Nút Thêm Giỏ */
.bd-single-summary form.cart {
    margin-top: 20px;
    margin-bottom: 20px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
}

.bd-single-summary form.cart .variations,
.bd-single-summary form.cart .single_variation_wrap,
.bd-single-summary form.cart .woocommerce-variation-add-to-cart,
.bd-single-product-wrapper form.cart .single_variation_wrap,
.bd-single-product-wrapper form.cart .woocommerce-variation-add-to-cart,
.right-single-product form.cart .single_variation_wrap,
.right-single-product form.cart .woocommerce-variation-add-to-cart,
#quick-view-product-main form.cart .single_variation_wrap,
#quick-view-product-main form.cart .woocommerce-variation-add-to-cart {
    width: 100%;
    flex: 1 1 100%;
}

/* Ẩn giá biến thể bên dưới (trên nút bấm) vì giá đã thay thế trực tiếp vào vị trí khoảng giá chính phía trên */
.bd-single-summary .single_variation .woocommerce-variation-price,
.right-single-product .single_variation .woocommerce-variation-price,
.bd-single-product-wrapper .single_variation .woocommerce-variation-price,
#quick-view-product-main .single_variation .woocommerce-variation-price {
    display: none !important;
}

/*
 * Hàng [Số lượng] + [Thêm vào giỏ] + [Mua ngay].
 * BẮT BUỘC width:100% — nếu để mặc định, hàng này là flex item trong form.cart
 * với `flex: 0 1 auto` nên chỉ co theo nội dung (520px) thay vì giãn hết khung (594px),
 * khiến 2 nút chừa khoảng trống bên phải.
 */
.bd-single-summary .bd-cart-action-row {
    width: 100%;
    flex: 1 1 100%;
}

.bd-single-summary .quantity {
    display: inline-flex;
    align-items: center;
    border: 1.5px solid var(--fc_color_border, #E1E5DF);
    border-radius: var(--fc_radius_md, 12px);
    overflow: hidden;
    background-color: var(--fc_color_surface, #FFFFFF);
    height: 48px;
    flex: 0 0 auto;
}

.bd-single-summary .quantity input.qty {
    width: 50px;
    height: 46px;
    border: 0;
    text-align: center;
    font-size: 16px;
    font-weight: 700;
    color: var(--fc_color_heading, #263C22);
    background: transparent;
    padding: 0;
    -moz-appearance: textfield;
}

.bd-single-summary .quantity input.qty::-webkit-outer-spin-button,
.bd-single-summary .quantity input.qty::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* Nút tăng/giảm số lượng (− +) nằm trong khung .quantity.
   Bề rộng hiển thị 25px; tổng khung = 25 + 50 + 25 = 100px.
   v7.md §4.3: 25px < 44px nên dùng ::before nới vùng bấm lên 44px
   (xem khối pseudo-element bên dưới) để vẫn đạt chuẩn touch target. */
.bd-single-summary .quantity .bd-qty-btn {
    position: relative;
    width: 25px;
    height: 46px;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--fc_color_primary, #3F6234);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease;
    flex: 0 0 auto;
}

.bd-single-summary .quantity .bd-qty-btn:hover {
    background-color: var(--fc_color_soft_green, #EEF5E8);
}

.bd-single-summary .quantity .bd-qty-btn:disabled {
    color: var(--fc_color_text_muted, #6B7569);
    cursor: not-allowed;
    background: transparent;
    opacity: 0.5;
    pointer-events: none;
}

/*
 * Vùng bấm mở rộng cho nút − / + (v7.md §4.3 — touch target >= 44×44px).
 * Nút hiển thị 25×46px; pseudo-element phủ rộng 44px (mỗi bên 9.5px) và kéo
 * đủ chiều cao khung => vùng bấm thực tế 44×46px.
 * KHÔNG cần set `right` vì left + width đã xác định bề rộng.
 */
.bd-single-summary .quantity .bd-qty-btn::before,
.bd-cart-item .bd-qty-stepper .bd-qty-btn::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: -9.5px;
    width: 44px;
}

.bd-single-summary .single_add_to_cart_button {
    height: 48px;
    min-height: 48px;
    padding: 0 28px;
    min-width: 0;
    background-color: var(--fc_color_primary, #3F6234);
    border: 0;
    border-radius: var(--fc_radius_md, 10px);
    color: #FFFFFF;
    font-size: 16px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: background-color 0.2s ease, transform 0.1s ease;
    flex: 1 1 0;
    /* Chia đều chiều rộng với nút "Mua ngay" */
}

.bd-single-summary .single_add_to_cart_button:hover {
    background-color: var(--fc_color_secondary, #263C22);
    color: #FFFFFF;
}

.bd-single-summary .single_add_to_cart_button:active {
    transform: translateY(1px);
}

/* Nút "Mua ngay": cùng kích thước nút Thêm giỏ, dùng màu secondary đậm hơn để phân cấp thị giác */
.bd-single-summary .bd-buy-now-btn {
    height: 48px;
    min-height: 48px;
    padding: 0 28px;
    min-width: 0;
    background-color: var(--fc_color_secondary, #263C22);
    border: 0;
    border-radius: var(--fc_radius_md, 12px);
    color: #FFFFFF;
    font-size: 16px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: background-color 0.2s ease, transform 0.1s ease;
    flex: 1 1 0;
    /* Chia đều chiều rộng với nút "Thêm vào giỏ" */
    cursor: pointer;
}

.bd-single-summary .bd-buy-now-btn:hover {
    background-color: var(--fc_color_primary, #3F6234);
    color: #FFFFFF;
}

.bd-single-summary .bd-buy-now-btn:active {
    transform: translateY(1px);
}

.bd-single-summary .bd-buy-now-btn[disabled] {
    opacity: 0.6;
    cursor: wait;
    pointer-events: none;
}

/* Nút Zalo Tư Vấn Thông Minh */
.bd-zalo-btn {
    min-height: 48px;
    border: 1.5px solid var(--fc_color_primary, #3F6234);
    background-color: var(--fc_color_surface, #FFFFFF);
    color: var(--fc_color_primary, #3F6234);
    transition: background-color 0.15s ease, border-color 0.15s ease;
}

.bd-zalo-btn:hover {
    background-color: var(--fc_color_soft_green, #EEF5E8);
    color: var(--fc_color_secondary, #263C22);
}

/* Trust Badges 3 Cột */
.bd-trust-badges {
    border-top: 1px solid var(--fc_color_border, #E1E5DF);
    padding-top: 16px;
}

/* 4. Section: Lý do phù hợp (Grid 3 thẻ)
   -------------------------------------------------------------------------- */
.bd-section-benefits {
    border-top: 1px solid var(--fc_color_border, #E1E5DF);
}

.bd-benefit-card {
    background-color: var(--fc_color_surface, #FFFFFF);
    border: 1px solid var(--fc_color_border, #E1E5DF);
    border-radius: var(--fc_radius_lg, 16px);
    transition: box-shadow 0.2s ease, border-color 0.2s ease;
}

.bd-benefit-card:hover {
    border-color: rgba(63, 98, 52, 0.4);
    box-shadow: 0 4px 20px rgba(63, 98, 52, 0.08);
}

/* 5. Section: Chi phí hằng ngày & Bằng chứng kiểm định
   -------------------------------------------------------------------------- */
/* 5. Chi phí sử dụng & Bằng chứng
   -------------------------------------------------------------------------- */
.bd-cost-card,
.bd-proof-card {
    background-color: var(--fc_color_surface, #FFFFFF);
    border: 1px solid var(--fc_color_border, #E1E5DF);
    border-radius: var(--fc_radius_lg, 16px);
}

.bd-cost-row {
    transition: background-color 0.15s ease;
}

.bd-cost-row:hover {
    background-color: var(--fc_body_background_color, #FBFAF5);
}

.bd-proof-row {
    transition: background-color 0.15s ease;
}

.bd-proof-row:hover {
    background-color: var(--fc_body_background_color, #FBFAF5);
}

.bd-proof-label {
    width: 28%;
    min-width: 110px;
    max-width: 140px;
}

/* 6. Accordion & FAQ Section
   -------------------------------------------------------------------------- */
.bd-section-faq {
    border-top: 1px solid var(--fc_color_border, #E1E5DF);
}

.bd-accordion-item {
    background-color: var(--fc_color_surface, #FFFFFF);
    border: 1px solid var(--fc_color_border, #E1E5DF);
    border-radius: var(--fc_radius_md, 10px);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.bd-accordion-item.is-open {
    border-color: rgba(63, 98, 52, 0.4);
    box-shadow: 0 2px 12px rgba(63, 98, 52, 0.05);
}

.bd-accordion-trigger {
    width: 100%;
    border: none;
    outline: none;
    box-shadow: none;
    background: transparent;
    border-radius: 0;
    margin: 0;
    cursor: pointer;
    text-align: left;
    transition: background-color 0.15s ease;
}

.bd-accordion-trigger:focus,
.bd-accordion-trigger:active {
    outline: none;
    box-shadow: none;
    border: none;
}

.bd-accordion-trigger:hover {
    background-color: var(--fc_body_background_color, #FBFAF5);
}

.bd-faq-question {
    font-size: 16px;
    font-weight: 700;
    color: var(--fc_color_heading, #263C22);
    line-height: 1.45;
}

/*
 * Icon +/- của accordion.
 * Trạng thái hiển thị tự động chuyển đổi theo class .is-open trên .bd-accordion-item.
 */
.bd-accordion-item .bd-icon-minus {
    display: none !important;
}

.bd-accordion-item .bd-icon-plus {
    display: inline-block !important;
}

.bd-accordion-item.is-open .bd-icon-plus {
    display: none !important;
}

.bd-accordion-item.is-open .bd-icon-minus {
    display: inline-block !important;
}

.bd-accordion-collapse {
    border-top: 1px solid var(--fc_color_border, #E1E5DF);
    padding-top: 16px;
}

.bd-faq-answer {
    color: var(--fc_body_color, #3C443B);
    font-size: 15px;
    line-height: 1.7;
}

.bd-faq-answer p:last-child {
    margin-bottom: 0;
}

.bd-faq-answer ul {
    padding-left: 20px;
    margin-bottom: 12px;
}

.bd-faq-answer li {
    margin-bottom: 6px;
}

/* 7. Sticky Add-to-Cart Bar Mobile (Hidden on Desktop by default)
   -------------------------------------------------------------------------- */
.bd-sticky-bottom-bar {
    display: none !important;
}

/* ==========================================================================
   8. BIODINO CART PAGE V7 STANDARD
   Base Desktop Style - Media queries nằm 100% trong responsive.css
   ========================================================================== */

/* Ẩn tiêu đề mặc định h1.title-page trên trang giỏ hàng */
body.woocommerce-cart .title-page {
    display: none;
}

/* Khung trang giỏ hàng: Trong suốt, bỏ viền hộp cũ */
body.woocommerce-cart .container-body {
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
}

body.woocommerce-cart .content-page .container {
    background-color: transparent !important;
    box-shadow: none !important;
    padding-top: 10px;
    padding-bottom: 40px;
}

.bd-cart-page-wrapper {
    margin-top: 10px;
    margin-bottom: 40px;
}


/* Thông báo WooCommerce trên trang Cart */
.woocommerce-cart .woocommerce-message,
.woocommerce-cart .woocommerce-info {
    background-color: var(--fc_color_soft_green, #EEF5E8);
    border: 1px solid var(--fc_color_border, #E1E5DF);
    border-left: 4px solid var(--fc_color_primary, #3F6234);
    border-radius: var(--fc_radius_md, 12px);
    color: var(--fc_color_heading, #263C22);
    padding: 12px 18px;
    margin-bottom: 24px;
}

.woocommerce-cart .woocommerce-message .button,
.woocommerce-cart .woocommerce-info .button {
    display: none;
}

/* Header */
.bd-cart-header {
    margin-bottom: 24px;
}

.bd-cart-title {
    letter-spacing: -0.5px;
    color: var(--fc_color_heading, #263C22);
    text-transform: none !important;
}

.bd-cart-count-badge {
    background-color: var(--fc_color_soft_green, #EEF5E8);
    color: var(--fc_color_heading, #263C22);
}

/* Thẻ sản phẩm trong giỏ (Cart Item Card) */
.bd-cart-item {
    background-color: var(--fc_color_surface, #FFFFFF);
    border: 1px solid var(--fc_color_border, #E1E5DF);
    border-radius: var(--fc_radius_lg, 16px);
    transition: border-color var(--fc_transition_fast, 0.2s ease);
}

.bd-cart-item:hover {
    border-color: var(--fc_color_tertiary, #8EAE68);
}

.bd-cart-item-thumb {
    width: 90px;
    border-radius: var(--fc_radius_md, 12px);
    overflow: hidden;
    background: transparent;
}

.bd-cart-item-thumb a {
    display: block;
    width: 100%;
}

.bd-cart-item-thumb img,
.bd-cart-item-thumb .bd-cart-thumb-img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: contain;
    border-radius: var(--fc_radius_md, 12px);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

.bd-cart-item-title {
    line-height: 1.35;
    text-transform: none !important;
}

.bd-cart-item-title a {
    color: var(--fc_color_heading, #263C22);
    /* Touch target >= 44px: padding dọc để vùng bấm đủ lớn, không phá bố cục chữ */
    display: inline-block;
    padding-top: 11px;
    padding-bottom: 11px;
    margin-top: -11px;
    margin-bottom: -11px;
}

.bd-cart-item-title a:hover {
    color: var(--fc_color_primary, #3F6234);
}

/* Link "Đổi size": màu + touch target >= 44px chiều cao (v7.md §4.3) */
.bd-cart-action-link {
    color: var(--fc_color_heading, #263C22);
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    padding: 0 4px;
}

.bd-cart-action-link:hover {
    color: var(--fc_color_primary, #3F6234);
    text-decoration: underline;
}

/* Nút xoá sản phẩm: v7.md §4.3 yêu cầu touch target >= 44x44px.
   Dùng min-height + padding để vùng bấm đủ lớn mà không phá bố cục dòng chữ. */
.bd-cart-remove-link {
    color: var(--fc_color_heading, #263C22);
    cursor: pointer;
    min-height: 44px;
    min-width: 44px;
    padding: 0 8px;
    align-items: center;
}

.bd-cart-remove-link:hover {
    color: var(--fc_color_primary, #3F6234);
}

.bd-cart-remove-link svg {
    vertical-align: -2px;
}

/* Stepper tăng giảm số lượng trên trang giỏ hàng.
   Đồng bộ 1:1 với style trang Chi tiết sản phẩm (.bd-single-summary .quantity):
   border 1.5px, khung 48px, nút cao 46px màu primary, input 46px font 16/700.
   v7.md §4.3: touch target tối thiểu 44×44px -> nút rộng 40px nhưng vùng bấm
   được nới bằng padding nên vẫn đạt >= 44px. */
.bd-cart-item .bd-qty-stepper {
    display: inline-flex;
    align-items: center;
    height: 48px;
    border: 1.5px solid var(--fc_color_border, #E1E5DF);
    border-radius: var(--fc_radius_md, 12px);
    background-color: var(--fc_color_surface, #FFFFFF);
    overflow: hidden;
}

.bd-cart-item .bd-qty-stepper .bd-qty-btn {
    position: relative;
    width: 25px;
    height: 46px;
    min-width: 25px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--fc_color_primary, #3F6234);
    cursor: pointer;
    flex: 0 0 auto;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.bd-cart-item .bd-qty-stepper .bd-qty-btn:hover {
    background-color: var(--fc_color_soft_green, #EEF5E8);
}

.bd-cart-item .bd-qty-stepper .bd-qty-btn:disabled {
    color: var(--fc_color_text_muted, #6B7569);
    cursor: not-allowed;
    background: transparent;
    opacity: 0.5;
    pointer-events: none;
}

.bd-cart-item .bd-qty-stepper input.qty {
    width: 50px;
    height: 46px;
    text-align: center;
    border: 0;
    background: transparent;
    font-size: 16px;
    font-weight: 700;
    color: var(--fc_color_heading, #263C22);
    padding: 0;
    -moz-appearance: textfield;
}

/* Link "Đổi size" cạnh nút xóa: đảm bảo touch target >= 44px chiều cao */
.bd-cart-item-actions .bd-cart-action-link {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    padding: 0 4px;
}

.bd-cart-item .bd-qty-stepper input.qty::-webkit-inner-spin-button,
.bd-cart-item .bd-qty-stepper input.qty::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}


/* Box Sản phẩm bổ trợ (Có thể bạn cần) */
.bd-cart-crosssell {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    background-color: var(--fc_color_soft_green, #EEF5E8);
    border-radius: var(--fc_radius_lg, 16px);
}

.bd-cart-crosssell-info {
    flex: 1 1 auto;
    min-width: 0;
}

.bd-cart-crosssell-title {
    text-transform: none !important;
}

.bd-cart-crosssell-btn {
    white-space: nowrap;
    background-color: var(--fc_color_surface, #FFFFFF) !important;
    color: var(--fc_color_secondary, #263C22) !important;
    border: 1.5px solid var(--fc_color_secondary, #263C22) !important;
    border-radius: var(--fc_radius_md, 12px) !important;
    transition: all var(--fc_transition_fast, 0.2s ease);
}

.bd-cart-crosssell-btn:hover {
    background-color: var(--fc_color_primary, #3F6234) !important;
    border-color: var(--fc_color_primary, #3F6234) !important;
    color: var(--fc_color_surface, #FFFFFF) !important;
}

/* Icon giỏ hàng lớn ở trạng thái giỏ trống (thay cho inline style) */
.bd-cart-empty-svg {
    width: 56px;
    height: 56px;
    stroke: var(--fc_color_primary, #3F6234);
    fill: none;
}

/* Thẻ Tóm tắt đơn (Order Summary Card) */
.cart-collaterals .cart_totals.bd-cart-summary-card {
    border: 1px solid var(--fc_color_border, #E1E5DF) !important;
    border-radius: var(--fc_radius_lg, 16px) !important;
    padding: 24px !important;
    background-color: var(--fc_color_surface, #FFFFFF) !important;
    position: sticky;
    top: 90px;
}

.bd-cart-summary-title {
    text-transform: none !important;
    letter-spacing: -0.3px;
}

.bd-cart-summary-divider {
    border-top: 1px solid var(--fc_color_border, #E1E5DF);
    opacity: 1;
}

.bd-cart-summary-total {
    color: var(--fc_color_heading, #263C22);
}

.bd-cart-btn-checkout {
    height: 50px;
    background-color: var(--fc_color_primary, #3F6234) !important;
    color: var(--fc_color_surface, #FFFFFF) !important;
    border: none !important;
    border-radius: var(--fc_radius_md, 12px) !important;
    font-size: 16px;
    font-weight: 600;
    transition: background-color var(--fc_transition_fast, 0.2s ease), transform var(--fc_transition_fast, 0.2s ease);
}

.bd-cart-btn-checkout:hover {
    background-color: var(--fc_color_secondary, #263C22) !important;
    color: var(--fc_color_surface, #FFFFFF) !important;
}

.bd-cart-btn-zalo {
    height: 48px;
    background-color: var(--fc_color_surface, #FFFFFF) !important;
    color: var(--fc_color_secondary, #263C22) !important;
    border: 1.5px solid var(--fc_color_secondary, #263C22) !important;
    border-radius: var(--fc_radius_md, 12px) !important;
    transition: all var(--fc_transition_fast, 0.2s ease);
}

.bd-cart-btn-zalo:hover {
    background-color: var(--fc_color_secondary, #263C22) !important;
    color: var(--fc_color_surface, #FFFFFF) !important;
}

.bd-cart-trust-pill {
    background-color: var(--fc_color_soft_green, #EEF5E8);
    border-radius: var(--fc_radius_pill, 999px) !important;
    white-space: nowrap;
}

/* Modal Đổi Size Trong Giỏ Hàng
-------------------------------------------------------------- */
.bd-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 99999;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 16px;
}

.bd-modal-overlay.active {
    display: flex !important;
}

.bd-modal-backdrop {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.55);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
}

.bd-change-size-dialog {
    position: relative;
    background: var(--fc_color_surface, #FFFFFF);
    border-radius: var(--fc_radius_lg, 16px);
    width: 100%;
    max-width: 520px;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.2);
    padding: 24px;
    z-index: 1;
    animation: bdModalFadeIn 0.25s ease-out;
}

@keyframes bdModalFadeIn {
    from {
        opacity: 0;
        transform: translateY(12px) scale(0.98);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.bd-change-size-dialog .bd-change-size-close {
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: background-color 0.15s ease;
}

.bd-change-size-dialog .bd-change-size-close:hover {
    background-color: var(--fc_color_soft_green, #EEF5E8);
}

.bd-change-size-submit-btn {
    min-height: 44px;
    background-color: var(--fc_color_primary, #3F6234) !important;
    color: var(--fc_color_surface, #FFFFFF) !important;
    border: none !important;
    transition: all 0.2s ease;
}

.bd-change-size-submit-btn:disabled,
.bd-change-size-submit-btn.disabled {
    opacity: 0.5 !important;
    cursor: not-allowed !important;
    background-color: var(--fc_color_border, #E1E5DF) !important;
    color: var(--fc_color_text_muted, #6B7569) !important;
}

.bd-change-size-submit-btn:not(:disabled):hover {
    background-color: var(--fc_color_secondary, #263C22) !important;
}

.bd-cart-action-link.bd-cart-change-size-btn {
    cursor: pointer;
    font-weight: 600;
}

/* Ẩn link Hướng dẫn chọn size trong Modal Đổi Size */
#bd-cart-change-size-modal .bd-size-guide-link {
    display: none !important;
}

#bd-cart-change-size-modal .bd-cart-item-thumb {
    width: 80px;
}