/*
Theme Name: Flatsome Child
Description: This is a child theme for Flatsome Theme
Author: UX Themes
Template: flatsome
Version: 3.0.1
*/

/*************** ADD CUSTOM CSS HERE.   ***************/

/* Ẩn "Tài khoản của tôi" text+icon trên desktop, giữ nguyên mobile */
@media only screen and (min-width: 48em) {
    li.account-item {
        display: none !important;
    }
}

/* VitaDoc reusable WPForms benefit modal */
.vd-benefit-modal-open {
    overflow: hidden;
}

.vd-benefit-form-launcher {
    display: inline-block;
}

.vd-benefit-form-trigger {
    border-radius: 999px !important;
    background: #0b8a3a !important;
    border-color: #0b8a3a !important;
    color: #fff !important;
    font-weight: 700;
}

.vd-benefit-modal[hidden] {
    display: none !important;
}

.vd-benefit-modal {
    position: fixed;
    inset: 0;
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
}

.vd-benefit-modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(18, 24, 31, 0.58);
}

.vd-benefit-modal__dialog {
    position: relative;
    z-index: 1;
    width: min(100%, 560px);
    max-height: calc(100vh - 48px);
    overflow: auto;
    border-radius: 22px;
    background: #fff;
    box-shadow: 0 24px 80px rgba(9, 21, 35, 0.28);
}

.vd-benefit-modal__close {
    position: absolute;
    top: 18px;
    right: 18px;
    z-index: 2;
    width: 42px;
    height: 42px;
    min-height: 42px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 50%;
    background: #f3f5f7;
    color: #08133a;
    cursor: pointer;
}

.vd-benefit-modal__close svg {
    width: 22px;
    height: 22px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.4;
    stroke-linecap: round;
}

.vd-benefit-form-inline {
    max-width: 560px;
    margin: 0 auto;
}

.vd-benefit-form {
    padding: 34px 42px 32px;
    color: #111936;
    text-align: center;
}

.vd-benefit-form__icon {
    width: min(46vw, 190px);
    margin: 0 auto 8px;
}

.vd-benefit-form__icon img {
    display: block;
    width: 100%;
    height: auto;
    margin: 0 auto;
}

.vd-benefit-form__title {
    margin: 0;
    font-size: 30px;
    line-height: 1.14;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0;
}

.vd-benefit-form__title--green {
    color: #06833d;
}

.vd-benefit-form__title--blue {
    color: #07164f;
}

.vd-benefit-form__divider {
    width: min(100%, 360px);
    margin: 22px auto 18px;
}

.vd-benefit-form__divider img {
    display: block;
    width: 100%;
    height: auto;
    margin: 0 auto;
}

.vd-benefit-form__description {
    max-width: 430px;
    margin: 0 auto 24px;
    color: #26304d;
    font-size: 18px;
    line-height: 1.45;
}

.vd-benefit-form__description strong {
    color: #078642;
}

.vd-benefit-form__body {
    text-align: left;
}

.vd-benefit-form__body .wpforms-container,
.vd-benefit-form__body .wpforms-container .wpforms-form {
    width: 100% !important;
    margin: 0 !important;
}

.vd-benefit-form__body .wpforms-field {
    position: relative;
    padding: 0 0 14px !important;
}

.vd-benefit-form__body .wpforms-field-row,
.vd-benefit-form__body .wpforms-field-row-block {
    width: 100% !important;
    max-width: 100% !important;
}

.vd-benefit-form__body .wpforms-field-label,
.vd-benefit-form__body .wpforms-field-sublabel {
    display: none !important;
}

.vd-benefit-form__body input[type="text"],
.vd-benefit-form__body input[type="email"],
.vd-benefit-form__body input[type="tel"],
.vd-benefit-form__body input[type="number"],
.vd-benefit-form__body select,
.vd-benefit-form__body textarea {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    min-height: 58px !important;
    padding: 14px 18px !important;
    border: 1px solid #e4e7ec !important;
    border-radius: 14px !important;
    background: #fff !important;
    box-shadow: 0 1px 4px rgba(15, 23, 42, 0.04) !important;
    color: #101828 !important;
    font-size: 16px !important;
    line-height: 1.35 !important;
    transition: border-color 0.16s ease, box-shadow 0.16s ease;
}

.vd-benefit-form__body .wpforms-field-small,
.vd-benefit-form__body .wpforms-field-medium,
.vd-benefit-form__body .wpforms-field-large {
    width: 100% !important;
    max-width: 100% !important;
}

.vd-benefit-form__body input::placeholder,
.vd-benefit-form__body textarea::placeholder {
    color: #98a2b3 !important;
    opacity: 1 !important;
}

.vd-benefit-form__body textarea {
    min-height: 104px !important;
    resize: vertical;
}

.vd-benefit-form__body input:focus,
.vd-benefit-form__body select:focus,
.vd-benefit-form__body textarea:focus {
    border-color: #0b8a3a !important;
    box-shadow: 0 0 0 3px rgba(11, 138, 58, 0.12) !important;
    outline: none !important;
}

.vd-benefit-form__body .wpforms-field-name input,
.vd-benefit-form__body .wpforms-field-phone input,
.vd-benefit-form__body .wpforms-field-select select {
    padding-left: 54px !important;
}

.vd-benefit-form__body .wpforms-field-name::before,
.vd-benefit-form__body .wpforms-field-phone::before,
.vd-benefit-form__body .wpforms-field-select::before {
    content: "";
    position: absolute;
    left: 18px;
    top: 17px;
    z-index: 1;
    width: 24px;
    height: 24px;
    background-color: #19213d;
    opacity: 0.78;
    pointer-events: none;
}

.vd-benefit-form__body .wpforms-field-name::before {
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 12a5 5 0 1 0 0-10 5 5 0 0 0 0 10Zm0 2c-4.4 0-8 2.4-8 5.3C4 20.8 5.2 22 6.7 22h10.6c1.5 0 2.7-1.2 2.7-2.7C20 16.4 16.4 14 12 14Z'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 12a5 5 0 1 0 0-10 5 5 0 0 0 0 10Zm0 2c-4.4 0-8 2.4-8 5.3C4 20.8 5.2 22 6.7 22h10.6c1.5 0 2.7-1.2 2.7-2.7C20 16.4 16.4 14 12 14Z'/%3E%3C/svg%3E") center / contain no-repeat;
}

.vd-benefit-form__body .wpforms-field-phone::before {
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M6.6 2.8c.5-.3 1.2-.2 1.6.3l2 2.6c.4.5.4 1.1.1 1.6L9.1 9.2c.9 1.9 2.4 3.4 4.3 4.3l1.9-1.2c.5-.3 1.2-.3 1.6.1l2.6 2c.5.4.6 1.1.3 1.6l-1.2 2.8c-.3.6-.9 1-1.6 1C9.1 19.8 4.2 14.9 4.2 7c0-.7.4-1.3 1-1.6l1.4-.6Z'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M6.6 2.8c.5-.3 1.2-.2 1.6.3l2 2.6c.4.5.4 1.1.1 1.6L9.1 9.2c.9 1.9 2.4 3.4 4.3 4.3l1.9-1.2c.5-.3 1.2-.3 1.6.1l2.6 2c.5.4.6 1.1.3 1.6l-1.2 2.8c-.3.6-.9 1-1.6 1C9.1 19.8 4.2 14.9 4.2 7c0-.7.4-1.3 1-1.6l1.4-.6Z'/%3E%3C/svg%3E") center / contain no-repeat;
}

.vd-benefit-form__body .wpforms-field-select::before {
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 2a7 7 0 0 0-7 7c0 5.3 7 13 7 13s7-7.7 7-13a7 7 0 0 0-7-7Zm0 9.5A2.5 2.5 0 1 1 12 6a2.5 2.5 0 0 1 0 5.5Z'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 2a7 7 0 0 0-7 7c0 5.3 7 13 7 13s7-7.7 7-13a7 7 0 0 0-7-7Zm0 9.5A2.5 2.5 0 1 1 12 6a2.5 2.5 0 0 1 0 5.5Z'/%3E%3C/svg%3E") center / contain no-repeat;
}

.vd-benefit-form__body .wpforms-submit-container {
    padding: 4px 0 0 !important;
}

.vd-benefit-form__body button[type="submit"],
.vd-benefit-form__body .wpforms-submit {
    width: 100% !important;
    min-height: 58px !important;
    border: 0 !important;
    border-radius: 12px !important;
    background: #07883d !important;
    color: #fff !important;
    font-size: 18px !important;
    font-weight: 800 !important;
    text-transform: uppercase;
    box-shadow: 0 10px 20px rgba(7, 136, 61, 0.22) !important;
}

.vd-benefit-form__body button[type="submit"]:hover,
.vd-benefit-form__body .wpforms-submit:hover {
    background: #056f32 !important;
}

.vd-benefit-form__body .wpforms-error {
    color: #b42318 !important;
    font-size: 13px !important;
}

.vd-benefit-form__body .wpforms-confirmation-container-full {
    margin: 0 !important;
    border-radius: 14px;
    text-align: center;
}

.vd-benefit-form__privacy {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    max-width: 430px;
    margin: 20px auto 0;
    color: #344054;
    font-size: 15px;
    line-height: 1.35;
    text-align: left;
}

.vd-benefit-form__privacy svg {
    width: 28px;
    height: 28px;
    flex: 0 0 28px;
    fill: none;
    stroke: #07883d;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.vd-benefit-form__missing {
    margin: 0;
    padding: 12px 14px;
    border-radius: 10px;
    background: #fff4e5;
    color: #7a4b00;
    text-align: center;
}

@media (max-width: 640px) {
    .vd-benefit-modal {
        padding: 16px;
    }

    .vd-benefit-modal__dialog {
        max-height: calc(100vh - 32px);
        border-radius: 18px;
    }

    .vd-benefit-form {
        padding: 30px 22px 26px;
    }

    .vd-benefit-modal__close {
        top: 14px;
        right: 14px;
        width: 38px;
        height: 38px;
        min-height: 38px;
    }

    .vd-benefit-form__icon {
        width: min(58vw, 170px);
        margin-bottom: 8px;
    }

    .vd-benefit-form__title {
        font-size: 23px;
    }

    .vd-benefit-form__divider {
        width: min(100%, 320px);
        margin: 18px auto 16px;
    }

    .vd-benefit-form__description {
        margin-bottom: 20px;
        font-size: 16px;
    }

    .vd-benefit-form__body input[type="text"],
    .vd-benefit-form__body input[type="email"],
    .vd-benefit-form__body input[type="tel"],
    .vd-benefit-form__body input[type="number"],
    .vd-benefit-form__body select,
    .vd-benefit-form__body textarea,
    .vd-benefit-form__body button[type="submit"],
    .vd-benefit-form__body .wpforms-submit {
        min-height: 54px !important;
        font-size: 15px !important;
    }
}

/* Bo tròn button Áp dụng mã giảm giá ở trang thanh toán */
.checkout_coupon button[name="apply_coupon"] {
    border-radius: 50px;
}

/* Bo tròn tất cả button trang My Account */
.woocommerce-account .button,
.woocommerce-account button,
.woocommerce-account input[type="submit"],
.woocommerce-account a.button {
    border-radius: 50px;
}


/* ===== Desktop: Danh sách đơn hàng dạng bảng ===== */
@media only screen and (min-width: 48em) {

.my-orders-list {
    display: table;
    width: 100%;
    border-collapse: collapse;
}

.my-orders-list::before {
    display: table-row;
    content: "";
}

.my-order-card {
    display: table-row;
    border: none;
    box-shadow: none;
    border-radius: 0;
    padding: 0;
}

.my-order-card__header,
.my-order-card__status,
.my-order-card__total,
.my-order-card__actions {
    display: table-cell;
    padding: 12px 16px;
    vertical-align: middle;
    border-bottom: 1px solid #f0f0f0;
}

.my-order-card__header {
    white-space: nowrap;
}

.my-order-card__number a {
    font-weight: 700;
    color: #222;
    text-decoration: none;
}

.my-order-card__number a:hover {
    color: #2d6a4f;
}

.my-order-card__date {
    display: block;
    font-size: 12px;
    color: #888;
    margin-top: 2px;
}

.my-order-card__status {
    white-space: nowrap;
}

.my-order-card__status span,
.my-order-card__status {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    background: #f0faf5;
    color: #2d6a4f;
}

.my-order-card--status-cancelled .my-order-card__status {
    background: #fff0f0;
    color: #c0392b;
}

.my-order-card--status-processing .my-order-card__status {
    background: #e8f4fd;
    color: #2980b9;
}

.my-order-card__total {
    font-weight: 600;
    white-space: nowrap;
}

.my-order-card__actions {
    text-align: right;
    white-space: nowrap;
}

.my-order-btn {
    display: inline-block;
    padding: 5px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    text-decoration: none;
    border: 1px solid #ddd;
    color: #333;
    margin-left: 4px;
}

.my-order-btn--pay {
    background: #2d6a4f;
    color: #fff !important;
    border-color: #2d6a4f;
}

.my-order-btn--cancel {
    border-color: #e53;
    color: #e53 !important;
}

.my-order-btn--view {
    border-color: #aaa;
    color: #555 !important;
}

/* ===== Desktop: Chi tiết đơn hàng ===== */

/* Header */
.order-app-detail {
    max-width: 900px;
    margin: 0 auto;
    padding-bottom: 20px;
}

.order-app-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    background: #fff;
    border: 1px solid #e5e5e5;
    border-radius: 10px;
    margin-bottom: 20px;
}

.order-app-header__left {
    display: flex;
    align-items: center;
    gap: 12px;
}

.order-app-number {
    font-size: 18px;
    font-weight: 700;
    color: #222;
}

.order-app-date {
    font-size: 13px;
    color: #888;
}

.order-app-status {
    padding: 5px 14px;
    font-size: 13px;
}

/* 2 cột: Sản phẩm + Thanh toán */
.order-app-cols {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-bottom: 16px;
}

.order-app-card {
    border-radius: 10px;
    border: 1px solid #e5e5e5;
    padding: 20px;
    margin-bottom: 0;
}

.order-app-card__title {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    color: #888;
    letter-spacing: 0.8px;
    margin-bottom: 14px;
    padding-bottom: 10px;
    border-bottom: 1px solid #f0f0f0;
}

.order-app-item {
    display: flex;
    justify-content: space-between;
    padding: 8px 0;
    font-size: 14px;
    border-bottom: 1px solid #f5f5f5;
}

.order-app-item:last-child { border-bottom: none; }

.order-app-total-row {
    display: flex;
    justify-content: space-between;
    font-size: 14px;
    padding: 6px 0;
    color: #555;
}

.order-app-total-row--grand {
    font-size: 16px;
    font-weight: 700;
    color: #222;
    padding-top: 10px;
    margin-top: 6px;
    border-top: 2px solid #eee;
}

.order-app-payment-method {
    font-size: 13px;
    color: #888;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid #f0f0f0;
}

/* Địa chỉ full width */
.woocommerce-customer-details {
    background: #fff;
    border: 1px solid #e5e5e5;
    border-radius: 10px;
    padding: 20px;
    margin-bottom: 16px;
}

.woocommerce-customer-details h2 {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    color: #888;
    letter-spacing: 0.8px;
    margin-bottom: 10px;
    padding-bottom: 10px;
    border-bottom: 1px solid #f0f0f0;
}

/* Nút action căn phải, không fixed */
.order-app-actions {
    position: static;
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding: 16px 0;
    background: transparent;
    border-top: none;
}

.order-app-btn {
    padding: 12px 28px;
    font-size: 14px;
    font-weight: 700;
    border-radius: 25px;
    letter-spacing: 0.3px;
    transition: opacity 0.2s, transform 0.1s;
}

.order-app-btn:hover {
    opacity: 0.85;
    transform: translateY(-1px);
}

.order-app-btn--pay {
    background: #2d6a4f !important;
    color: #fff !important;
    border-color: #2d6a4f !important;
    box-shadow: 0 4px 12px rgba(45,106,79,0.35);
}

.order-app-btn--cancel {
    border: 2px solid #e53 !important;
    color: #e53 !important;
    background: #fff !important;
    box-shadow: 0 2px 8px rgba(238,85,51,0.15);
}

}

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

/* Đổi background body sang trắng để tránh lộ màu xanh khi nội dung ngắn */
html,
body {
    background-color: #ffffff !important;
    background-image: none !important;
}

/* Tab bar ngang scroll được cho My Account trên mobile */
.woocommerce-MyAccount-navigation ul {
    display: flex !important;
    flex-direction: row !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    white-space: nowrap;
    padding: 0 !important;
    margin: 0 0 16px 0 !important;
    border-bottom: 2px solid #e5e5e5 !important;
    list-style: none !important;
    scrollbar-width: none;
}

.woocommerce-MyAccount-navigation ul::-webkit-scrollbar {
    display: none;
}

.woocommerce-MyAccount-navigation ul li {
    display: inline-flex !important;
    flex-shrink: 0 !important;
    border: none !important;
    border-bottom: 3px solid transparent !important;
    margin-bottom: -2px !important;
    width: auto !important;
    float: none !important;
}

.woocommerce-MyAccount-navigation ul li a {
    display: block !important;
    padding: 10px 14px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    color: #666 !important;
    text-decoration: none !important;
    white-space: nowrap !important;
    border: none !important;
    border-right: none !important;
    box-shadow: none !important;
}

.woocommerce-MyAccount-navigation ul li + li {
    border-left: none !important;
}

.woocommerce-MyAccount-navigation ul li.is-active {
    border-bottom: 3px solid #2d6a4f !important;
}

.woocommerce-MyAccount-navigation ul li.is-active a {
    color: #2d6a4f !important;
}

/* ===== Chi tiết đơn hàng - App layout ===== */
.order-app-detail { padding-bottom: 80px; }

.order-app-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 16px;
    padding: 14px;
    background: #fff;
    border-radius: 10px;
    border: 1px solid #e5e5e5;
}
.order-app-header__left { display: flex; flex-direction: column; gap: 4px; }
.order-app-number { font-size: 16px; font-weight: 700; color: #222; }
.order-app-date { font-size: 12px; color: #888; }
.order-app-status {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    background: #f0faf5;
    color: #2d6a4f;
}
.order-app-card {
    background: #fff;
    border: 1px solid #e5e5e5;
    border-radius: 10px;
    padding: 14px;
    margin-bottom: 12px;
}
.order-app-card__title {
    font-size: 13px; font-weight: 700;
    text-transform: uppercase; color: #888;
    letter-spacing: 0.5px; margin-bottom: 12px;
}
.order-app-item {
    display: flex; justify-content: space-between;
    align-items: center; padding: 6px 0;
    border-bottom: 1px solid #f5f5f5; font-size: 14px;
}
.order-app-item:last-child { border-bottom: none; }
.order-app-item__qty { color: #888; font-size: 13px; }
.order-app-item__total { font-weight: 600; white-space: nowrap; margin-left: 8px; }

.order-app-total-row {
    display: flex; justify-content: space-between;
    font-size: 14px; padding: 5px 0; color: #555;
    border-bottom: 1px solid #f5f5f5;
}
.order-app-total-row:last-of-type { border-bottom: none; }
.order-app-total-row--grand {
    font-size: 16px; font-weight: 700; color: #222;
    margin-top: 4px; padding-top: 8px;
    border-top: 2px solid #eee; border-bottom: none;
}
.order-app-payment-method {
    font-size: 13px; color: #888;
    margin-top: 10px; padding-top: 10px;
    border-top: 1px solid #f5f5f5;
}
.woocommerce-customer-details {
    background: #fff; border: 1px solid #e5e5e5;
    border-radius: 10px; padding: 14px; margin-bottom: 12px;
}
.woocommerce-customer-details h2 {
    font-size: 13px; font-weight: 700;
    text-transform: uppercase; color: #888;
    letter-spacing: 0.5px; margin-bottom: 10px;
}
.order-app-actions {
    display: flex; gap: 10px; justify-content: flex-end;
    padding: 14px; background: #fff;
    border-top: 1px solid #eee;
    position: fixed; bottom: 0; left: 0; right: 0; z-index: 100;
}
.order-app-btn {
    display: inline-block; padding: 10px 20px;
    border-radius: 25px; font-size: 13px; font-weight: 600;
    text-decoration: none; border: 1px solid #ddd; color: #333;
}
.order-app-btn--pay { background: #2d6a4f; color: #fff !important; border-color: #2d6a4f; }
.order-app-btn--cancel { border-color: #e53; color: #e53 !important; background: #fff; }

/* Danh sách đơn hàng dạng card */
.my-orders-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.my-order-card {
    background: #fff;
    border: 1px solid #e5e5e5;
    border-radius: 10px;
    padding: 14px;
    box-shadow: 0 1px 4px rgba(0,0,0,0.06);
}

/* Hàng 1: Mã đơn trái - Ngày phải */
.my-order-card__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 6px;
}

.my-order-card__number a {
    font-size: 15px;
    font-weight: 700;
    color: #222;
    text-decoration: none;
}

.my-order-card__date {
    font-size: 13px;
    color: #888;
}

/* Hàng 2: Trạng thái */
.my-order-card__status {
    display: inline-block;
    background: #f0faf5;
    color: #2d6a4f;
    border-radius: 20px;
    padding: 2px 10px;
    font-size: 12px;
    font-weight: 600;
    margin-bottom: 6px;
}

/* Hàng 3: Tổng tiền */
.my-order-card__total {
    font-size: 14px;
    font-weight: 600;
    color: #333;
    margin-bottom: 10px;
}

/* Hàng 4: Nút action căn phải */
.my-order-card__actions {
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    gap: 8px;
    padding-top: 10px;
    border-top: 1px solid #f0f0f0;
}

.my-order-btn {
    display: inline-block;
    padding: 6px 14px;
    font-size: 12px;
    font-weight: 600;
    border-radius: 20px;
    text-decoration: none;
    border: 1px solid #ddd;
    color: #333;
    background: #fff;
}

.my-order-btn--pay {
    background: #2d6a4f;
    color: #fff !important;
    border-color: #2d6a4f;
}

.my-order-btn--cancel {
    border-color: #e53;
    color: #e53 !important;
}

.my-order-btn--view {
    border-color: #aaa;
    color: #555 !important;
}

/* Fix bảng review order và order details trên mobile */
.woocommerce-checkout-review-order-table,
.woocommerce-table.order_details,
table.shop_table {
    width: 100% !important;
    table-layout: auto !important;
}

/* Ẩn cột số lượng riêng (cột 2 không phải cột cuối) */
.woocommerce-checkout-review-order-table thead tr th:nth-child(2):not(:last-child),
.woocommerce-checkout-review-order-table tbody tr td:nth-child(2):not(:last-child) {
    display: none !important;
}

/* Hiển thị đầy đủ cột giá trong bảng order_item */
tr.order_item td.product-name {
    width: 50% !important;
}

tr.order_item td.product-quantity {
    width: 20% !important;
    text-align: center !important;
    display: table-cell !important;
}

tr.order_item td.product-subtotal {
    width: 30% !important;
    text-align: right !important;
    display: table-cell !important;
    white-space: nowrap !important;
}

.woocommerce-checkout-review-order-table th,
.woocommerce-checkout-review-order-table td,
.woocommerce-table.order_details th,
.woocommerce-table.order_details td {
    padding: 8px 6px !important;
    font-size: 13px !important;
}

.woocommerce-checkout-review-order-table thead th:last-child,
.woocommerce-checkout-review-order-table tbody td:last-child,
.woocommerce-checkout-review-order-table tfoot td {
    text-align: right !important;
    white-space: nowrap !important;
}

/* Căn thẳng hàng nút Thêm vào giỏ và Mua ngay trên mobile */
.product .cart {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}
.product .cart .button,
.product .cart .buy-now-button {
    flex: 1;
    text-align: center;
    white-space: nowrap;
}

/* Ẩn toàn bộ footer trên mobile */
#footer,
footer,
.footer-wrapper,
.footer-widgets,
.absolute-footer {
    display: none !important;
}

}

/* ===== Desktop & Chung: Danh mục con (Sub menu cấp 2/3) ===== */
.vd-subcat-nav-wrapper {
    margin-bottom: 20px;
    width: 100%;
}
.vd-subcat-nav {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
}
.vd-subcat-nav li {
    display: inline-flex;
    align-items: center;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1;
}
.vd-subcat-nav li a {
    font-size: 15px;
    font-weight: 500;
    color: #555;
    text-transform: uppercase;
    text-decoration: none;
    padding: 8px 4px;
    transition: color 0.2s ease;
}
.vd-subcat-nav li a:hover {
    color: #2d6a4f;
}
.vd-subcat-nav li.is-active a {
    font-weight: 700;
    color: #2d6a4f;
}
.vd-subcat-nav li:not(:last-child)::after {
    content: "|";
    display: inline-block;
    margin: 0 12px;
    color: #ccc;
    font-weight: 300;
}

@media only screen and (max-width: 48em) {
    /* Điều chỉnh danh mục con vuốt ngang trên Mobile */
    .vd-subcat-nav-wrapper {
        margin-bottom: 16px;
    }
    .vd-subcat-nav {
        flex-wrap: nowrap;
        justify-content: flex-start;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        padding-bottom: 4px !important;
    }
    .vd-subcat-nav::-webkit-scrollbar {
        display: none;
    }
    .vd-subcat-nav li {
        flex-shrink: 0;
    }
    .vd-subcat-nav li a {
        font-size: 13px;
        padding: 6px 4px;
    }
}