/* ========================================================
   CUSTOM SINGLE PRODUCT PAGE LAYOUT CSS
======================================================== */


/* ========================================================
   1. ORANGE BANNER
======================================================== */

.bbdr-product-banner {
    background-color: #ff6600;
    color: #fff;
    padding: 12px 20px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 20px;
}

.bbdr-product-banner .banner-icon {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.bbdr-product-banner .banner-icon svg {
    width: 100%;
    height: 100%;
    stroke-width: 1.5;
}

.bbdr-product-banner .banner-title {
    font-size: 17px;
    font-weight: 800;
    text-transform: uppercase;
    margin-bottom: 2px;
    line-height: 1.2;
}

.bbdr-product-banner .banner-desc {
    font-size: 13px;
    line-height: 1.2;
}


/* ========================================================
   2. CATEGORY TAG
======================================================== */

.bbdr-product-cat-tag {
    display: inline-block;
    background-color: #0A33A5;
    color: #fff;
    padding: 3px 10px;
    font-size: 11px;
    font-weight: 700;
    border-radius: 4px;
    margin-bottom: 12px;
}


/* ========================================================
   3. META & PRICE BLOCK
======================================================== */

.bbdr-product-meta-block {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 30px;
    font-size: 13px;
    color: #555;
    margin-bottom: 15px;
    padding-bottom: 15px;
    border-bottom: 1px solid #eaeaea;
}

.bbdr-sku-wrapper {
    font-weight: 600;
    color: #333;
}

.bbdr-sku-wrapper .sku {
    font-weight: normal;
    color: #555;
}

.bbdr-rating-sold {
    display: flex;
    align-items: center;
    gap: 15px;
}

.bbdr-stars {
    display: flex;
    align-items: center;
    gap: 5px;
}

.bbdr-stars .star-rating {
    font-size: 12px;
    width: 60px;
    color: #ffcc00;
}

.bbdr-stars .rating-text {
    font-weight: 600;
    color: #333;
}

.bbdr-sold {
    border-left: 1px solid #ccc;
    padding-left: 15px;
    font-weight: 600;
    color: #333;
}

.bbdr-product-price-block {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 25px;
}

.bbdr-product-price-block .price {
    font-size: 26px !important;
    font-weight: 800 !important;
    color: #e60012 !important;
    margin: 0 !important;
    line-height: 1 !important;
}

.bbdr-product-price-block .price del {
    font-size: 16px;
    color: #999;
    font-weight: 500;
    margin-left: 10px;
}

.bbdr-discount-badge {
    background-color: #e60012;
    color: #fff;
    padding: 3px 8px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: bold;
}


/* ========================================================
   4. VARIATION BUTTONS
======================================================== */

.bbdr-variation-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 5px;
}

.bbdr-variation-buttons .bbdr-var-btn {
    background: #fff;
    border: 1px solid #ddd;
    color: #333;
    padding: 8px 15px;
    border-radius: 4px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
    min-width: unset;
    margin: 0;
    line-height: 1.2;
    text-transform: none;
}

.bbdr-variation-buttons .bbdr-var-btn:hover {
    border-color: #0A33A5;
    color: #0A33A5;
}

.bbdr-variation-buttons .bbdr-var-btn.selected {
    border-color: #0A33A5;
    color: #0A33A5;
    background-color: #f0f4ff;
    font-weight: 700;
}

.woocommerce-variation-add-to-cart {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
}


/* ========================================================
   5. ADD TO CART & BUY NOW BUTTONS
======================================================== */

.woocommerce-variation-add-to-cart .quantity {
    display: flex;
    align-items: center;
    width: 100%;
    margin: 0 0 15px 0 !important;
}

.woocommerce-variation-add-to-cart .single_add_to_cart_button,
.bbdr-buy-now {
    flex: 1;
    min-width: 150px;
    height: 48px;
    margin: 0 !important;
    border-radius: 4px !important;
    font-size: 15px !important;
    font-weight: 700 !important;

    display: flex !important;
    align-items: center;
    justify-content: center;
    gap: 8px;

    text-transform: uppercase;
}

.woocommerce-variation-add-to-cart .single_add_to_cart_button {
    background-color: #e50000 !important;
    color: #fff !important;
}

.woocommerce-variation-add-to-cart .single_add_to_cart_button::before {
    content: "";
    display: inline-block;
    width: 20px;
    height: 20px;
    margin-right: 8px;

    background-image: url('data:image/svg+xml;utf8,<svg viewBox="0 0 24 24" fill="none" stroke="%23FFF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" xmlns="http://www.w3.org/2000/svg"><circle cx="9" cy="21" r="1"></circle><circle cx="20" cy="21" r="1"></circle><path d="M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6"></path></svg>');

    background-size: contain;
    background-repeat: no-repeat;
}

.bbdr-buy-now {
    background-color: #00289a !important;
    color: #fff !important;
    border: none;
    cursor: pointer;
}

.bbdr-buy-now svg {
    width: 18px;
    height: 18px;
}


/* ========================================================
   6. TRUST BADGES
======================================================== */

.bbdr-trust-badges {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px 10px;
    margin-top: 30px;
    border-top: 1px solid #eaeaea;
    padding-top: 25px;
}

.bbdr-trust-badges .badge-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    font-size: 12px;
    color: #333;
    line-height: 1.4;
}

.bbdr-trust-badges .badge-item img {
    width: 26px;
    height: 26px;
    margin-top: 2px;
}

.bbdr-trust-badges .badge-item span {
    font-weight: 700;
    color: #0A33A5;
    display: block;
    margin-bottom: 3px;
    font-size: 13px;
}

.bbdr-trust-badges .badge-item small {
    font-weight: normal;
    color: #666;
    font-size: 11px;
    display: block;
}


/* ========================================================
   VARIATIONS LAYOUT
======================================================== */

.variations th {
    width: 20% !important;
    text-align: left !important;
    vertical-align: middle !important;
    padding: 5px 0 !important;
    font-size: 14px;
}

.variations td {
    padding: 5px 0 !important;
    vertical-align: middle !important;
}


/* ========================================================
   7. BOTTOM TABS LAYOUT
======================================================== */

.bbdr-desc-specs-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 30px;
}

.bbdr-desc-col {
    flex: 2;
    min-width: 300px;
    font-size: 15px;
    line-height: 1.7;
    color: #333;
}

.bbdr-specs-col {
    flex: 1;
    min-width: 300px;
}

.bbdr-specs-box {
    border: 1px solid #eaeaea;
    border-radius: 8px;
    padding: 25px;
    background: #fafafa;
}

.bbdr-specs-title {
    font-size: 16px;
    font-weight: bold;
    color: #0A33A5;
    margin-bottom: 20px;
    border-bottom: 2px solid #0A33A5;
    display: inline-block;
    padding-bottom: 5px;
    text-transform: uppercase;
}

.bbdr-specs-box table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 0;
}

.bbdr-specs-box table th,
.bbdr-specs-box table td {
    padding: 12px 10px;
    border-bottom: 1px solid #eee;
    font-size: 14px;
}

.bbdr-specs-box table th {
    width: 35%;
    color: #555;
    font-weight: normal;
}

.bbdr-specs-box table td {
    font-weight: 600;
    color: #222;
}


/* ========================================================
   8. ẢNH ĐẠI DIỆN CATEGORY
   FULL CHIỀU NGANG
======================================================== */

.bbdr-cat-products {
    width: 100%;
    margin: 10px 0 16px;
    padding: 0;

    display: flex;
    justify-content: center;
    align-items: center;

    background: transparent !important;
    border: none !important;
    box-shadow: none !important;

    overflow: hidden;
}

.bbdr-cat-products .bbdr-category-main-image {
    display: block;

    width: 100% !important;
    max-width: 100% !important;

    height: auto !important;

    object-fit: contain;

    margin: 0 !important;
    padding: 0 !important;

    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}


/* Placeholder */

.bbdr-cat-products .bbdr-category-placeholder {
    width: 80px !important;
    height: 80px !important;
    object-fit: contain;
}


/* ========================================================
   9. NÚT XEM SẢN PHẨM
======================================================== */

.product-category.bbdr-custom-cat .bbdr-cat-action {
    width: 100%;
    margin-top: 10px;
    text-align: center;
}

.product-category.bbdr-custom-cat .bbdr-cat-action a.bbdr-btn-xemsp {
    display: inline-flex !important;

    align-items: center !important;
    justify-content: center !important;

    width: fit-content !important;
    min-width: 132px !important;
    max-width: none !important;

    height: 32px !important;

    padding: 0 12px !important;
    margin: 0 auto !important;

    background: #ffffff !important;
    color: #0A33A5 !important;

    border: 1px solid #0A33A5 !important;
    border-radius: 5px !important;

    font-size: 13px !important;
    font-weight: 700 !important;
    line-height: 30px !important;

    text-transform: none !important;
    text-decoration: none !important;

    box-shadow: none !important;
    flex: 0 0 auto !important;
}

.product-category.bbdr-custom-cat .bbdr-cat-action a.bbdr-btn-xemsp::after {
    content: "→";

    display: inline-block;

    margin-left: 7px;

    font-size: 13px;
    line-height: 1;
}

.product-category.bbdr-custom-cat .bbdr-cat-action a.bbdr-btn-xemsp:hover,
.product-category.bbdr-custom-cat .bbdr-cat-action a.bbdr-btn-xemsp:focus {
    width: fit-content !important;
    min-width: 132px !important;

    background: #ffffff !important;
    color: #0A33A5 !important;

    border: 1px solid #0A33A5 !important;
    border-radius: 5px !important;

    box-shadow: none !important;
    transform: none !important;
}


/* ========================================================
   10. ICON DANH MỤC
======================================================== */

.bbdr-cat-icon .bbdr-category-icon-image {
    width: 60px !important;
    height: 60px !important;

    object-fit: contain;

    border: none !important;
    border-radius: 50%;
    box-shadow: none !important;
}

.bbdr-default-cat-icon {
    width: 60px;
    height: 60px;

    background: #eee;
    border-radius: 50%;

    display: flex;
    align-items: center;
    justify-content: center;

    color: #999;
}


/* ========================================================
   11. PRODUCT CATEGORY - ẢNH SẢN PHẨM
   KHUNG ĐỀU - ẢNH FULL - KHÔNG CROP
======================================================== */

/*
 * Đây là phần dành cho:
 *
 * /danh-muc/san-pham/bien-bao-pccc/
 *
 * và các danh mục sản phẩm khác.
 *
 * KHÔNG áp dụng cho ảnh chính Single Product.
 */

body.woocommerce .product-small .box-image {
    width: 100% !important;

    height: 300px !important;

    padding: 0 !important;
    margin: 0 !important;

    background: #fff !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    overflow: hidden !important;

    position: relative !important;
}


/* Link */

body.woocommerce .product-small .box-image .image-fade_in_back {
    width: 100% !important;
    height: 100% !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    padding: 0 !important;
    margin: 0 !important;

    overflow: hidden !important;
}

body.woocommerce .product-small .box-image .image-fade_in_back > a {
    width: 100% !important;
    height: 100% !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    padding: 0 !important;
    margin: 0 !important;

    overflow: hidden !important;
}


/* Ảnh sản phẩm */

body.woocommerce .product-small .box-image img {
    display: block !important;

    width: auto !important;
    height: auto !important;

    max-width: 100% !important;
    max-height: 100% !important;

    object-fit: contain !important;
    object-position: center center !important;

    margin: 0 auto !important;
    padding: 0 !important;

    transform: none !important;
}


/* Không zoom */

body.woocommerce .product-small:hover .box-image img {
    transform: none !important;
}


/* Không pseudo crop */

body.woocommerce .product-small .box-image::before,
body.woocommerce .product-small .box-image::after {
    display: none !important;
}


/* ========================================================
   12. SINGLE PRODUCT - ẢNH CHÍNH
   ======================================================== */

/*
 * QUAN TRỌNG:
 *
 * Không thay đổi position của:
 * .woocommerce-product-gallery__image.slide
 *
 * Vì Flickity cần position:absolute
 * để slider hoạt động.
 *
 * Chỉ ép viewport thành KHUNG VUÔNG
 * và cho ảnh hiển thị FULL.
 */


/* Gallery */

.single-product .woocommerce-product-gallery {
    width: 100% !important;
}


/* Khung ảnh chính */

.single-product .woocommerce-product-gallery .product-images {
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}


/*
 * Flickity viewport:
 *
 * Giữ khung vuông.
 * Không dùng height:auto vì Flickity
 * có thể bị mất chiều cao.
 */

.single-product .woocommerce-product-gallery .flickity-viewport {
    width: 100% !important;

    height: auto !important;

    aspect-ratio: 1 / 1 !important;

    min-height: 0 !important;

    overflow: hidden !important;
}


/*
 * KHÔNG thay đổi position của Flickity slider.
 */

.single-product .woocommerce-product-gallery .flickity-slider {
    width: 100% !important;
    height: 100% !important;
}


/*
 * Slide ảnh.
 *
 * KHÔNG đặt position:relative.
 * Để nguyên position:absolute
 * mà Flickity tạo ra.
 */

.single-product .woocommerce-product-gallery
.woocommerce-product-gallery__image.slide {
    width: 100% !important;
    height: 100% !important;

    display: flex !important;

    align-items: center !important;
    justify-content: center !important;

    overflow: hidden !important;
}


/*
 * Link chứa ảnh
 */

.single-product .woocommerce-product-gallery
.woocommerce-product-gallery__image.slide > a {
    display: flex !important;

    align-items: center !important;
    justify-content: center !important;

    width: 100% !important;
    height: 100% !important;

    padding: 0 !important;
    margin: 0 !important;

    overflow: hidden !important;
}


/*
 * ẢNH CHÍNH
 *
 * Không crop.
 * Không ép chiều cao.
 * Giữ nguyên tỷ lệ.
 */

.single-product .woocommerce-product-gallery
.woocommerce-product-gallery__image.slide > a > img {
    display: block !important;

    width: 100% !important;
    height: 100% !important;

    max-width: 100% !important;
    max-height: 100% !important;

    object-fit: contain !important;
    object-position: center center !important;

    margin: 0 !important;
    padding: 0 !important;

    transform: none !important;
}


/*
 * Không zoom ảnh khi hover
 */

.single-product .woocommerce-product-gallery
.woocommerce-product-gallery__image.slide:hover > a > img {
    transform: none !important;
}


/*
 * Không để Flatsome crop bằng pseudo
 */

.single-product .woocommerce-product-gallery
.product-images::before,
.single-product .woocommerce-product-gallery
.product-images::after {
    display: none !important;
}


/* ========================================================
   13. WIDEN SINGLE PRODUCT PAGE
======================================================== */

@media (min-width: 1024px) {

    .single-product .container {
        max-width: 1300px !important;
        width: 100%;
    }

    .single-product .row {
        max-width: 1300px !important;
        width: 100%;
    }

}


/* ========================================================
   14. MOBILE
======================================================== */

@media (max-width: 849px) {

    /* Category image */

    .bbdr-cat-products {
        height: 115px;
        margin: 10px 0 16px;
    }

    .bbdr-cat-products .bbdr-category-main-image {
        height: 108px !important;
        max-width: 100% !important;
    }


    /* Product category */

    body.woocommerce .product-small .box-image {
        height: 260px !important;
    }


    /* Single product gallery */

    .single-product .woocommerce-product-gallery .flickity-viewport {
        aspect-ratio: 1 / 1 !important;
        height: auto !important;
    }

    .single-product .woocommerce-product-gallery
    .woocommerce-product-gallery__image.slide {
        width: 100% !important;
        height: 100% !important;
    }


    /* Banner */

    .bbdr-product-banner {
        flex-direction: column;
        text-align: center;
        gap: 10px;
    }


    /* Meta */

    .bbdr-product-meta-block {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }


    /* Trust badges */

    .bbdr-trust-badges {
        grid-template-columns: 1fr 1fr;
        gap: 15px 10px;
    }

    .bbdr-trust-badges .badge-item span {
        font-size: 11px;
    }

    .bbdr-trust-badges .badge-item small {
        font-size: 9px;
    }


    /* Variations */

    .variations tbody tr {
        display: flex;
        flex-direction: column;
        margin-bottom: 10px;
    }

    .variations th {
        width: 100% !important;
        padding-bottom: 5px !important;
    }

    .variations td {
        width: 100% !important;
        padding-top: 0 !important;
    }


    /* Buttons */

    .woocommerce-variation-add-to-cart {
        display: flex;
        flex-direction: column;
        gap: 10px;
    }

    .woocommerce-variation-add-to-cart .quantity {
        margin-bottom: 5px !important;
        justify-content: flex-start;
    }

    .woocommerce-variation-add-to-cart .single_add_to_cart_button,
    .bbdr-buy-now {
        width: 100%;
        margin: 0 !important;
    }


    /* Description */

    .bbdr-desc-specs-grid {
        flex-direction: column;
        gap: 20px;
    }

}

/* =========================================================
   BBDR ADMIN - ỨNG DỤNG SẢN PHẨM
   CSS fallback only.

   Giao diện chính của khu vực Ứng dụng được đặt trong
   custom-product-fields.php để tránh xung đột với WooCommerce.
========================================================= */

.bbdr-applications-group {
    clear: both;
    width: 100%;
}

/* Không ép lại display/position/appearance của checkbox ở đây.
   custom-product-fields.php xử lý toàn bộ giao diện checkbox. */


/* =========================================================
   BBDR - THÔNG SỐ KỸ THUẬT
   GIAO DIỆN BẢNG GIỐNG MẪU
========================================================= */

/* Khung toàn bộ bảng */
.single-product .bbdr-specs-wrapper {
    width: 100%;
    margin: 0;
    padding: 0;
    background: #fff;
    border: 1px solid #e5e5e5;
    border-radius: 10px;
    overflow: hidden;
}

/* Bảng */
.single-product .bbdr-specs-table {
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    border-collapse: collapse !important;
    border-spacing: 0 !important;
    background: #fff;
}

/* Tất cả ô */
.single-product .bbdr-specs-table th,
.single-product .bbdr-specs-table td {
    border: 0 !important;
    border-bottom: 1px solid #e8e8e8 !important;

    padding: 15px 18px !important;

    font-size: 14px !important;
    line-height: 1.5 !important;

    vertical-align: middle !important;
}

/* Cột tiêu đề */
.single-product .bbdr-specs-table th {
    width: 28% !important;

    background: #fafafa !important;

    color: #111 !important;

    font-weight: 700 !important;

    text-align: left !important;

    text-transform: uppercase;

    white-space: normal !important;
}

/* Dấu : sau tiêu đề */
.single-product .bbdr-specs-table th {
    letter-spacing: 0.1px;
}

/* Cột thông tin */
.single-product .bbdr-specs-table td {
    width: 72% !important;

    background: #fff !important;

    color: #333 !important;

    font-weight: 400 !important;

    text-align: left !important;
}

/* Dòng cuối cùng bỏ đường kẻ */
.single-product .bbdr-specs-table tr:last-child th,
.single-product .bbdr-specs-table tr:last-child td {
    border-bottom: none !important;
}

/* Hover nhẹ */
.single-product .bbdr-specs-table tr:hover th {
    background: #f7f7f7 !important;
}

.single-product .bbdr-specs-table tr:hover td {
    background: #fff !important;
}


/* =========================================================
   ỨNG DỤNG
========================================================= */

.single-product .bbdr-specs-table tr:last-child th {
    vertical-align: top !important;
}


/* =========================================================
   TRƯỜNG RỖNG
========================================================= */

.single-product .bbdr-specs-empty {
    padding: 20px !important;
    border: 1px solid #e5e5e5;
    border-radius: 10px;
    color: #666;
    background: #fff;
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 849px) {

    .single-product .bbdr-specs-wrapper {
        border-radius: 8px;
    }

    .single-product .bbdr-specs-table th,
    .single-product .bbdr-specs-table td {
        padding: 12px 12px !important;
        font-size: 13px !important;
        line-height: 1.45 !important;
    }

    .single-product .bbdr-specs-table th {
        width: 34% !important;
    }

    .single-product .bbdr-specs-table td {
        width: 66% !important;
    }
}