/* ============================================================
   TRANG CHI TIẾT SẢN PHẨM - U TẺN
   Style đồng bộ màu thương hiệu, ảnh chính đồng nhất tỉ lệ
   ============================================================ */

/* ── KHUNG TỔNG ── */
.single-product div.product {
    padding-top: 10px;
}

/* ════════════════════════════════════════════
   1. ẢNH CHÍNH ĐỒNG NHẤT TỈ LỆ (FIX KÍCH THƯỚC)
   ════════════════════════════════════════════ */
/* Ảnh chính: ép tỉ lệ vuông 1:1 để mọi sản phẩm hiển thị đồng đều */
.single-product .product-gallery-slider .woocommerce-product-gallery__image,
.single-product .woocommerce-product-gallery .woocommerce-product-gallery__image {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    border-radius: 18px;
    background: #f7f7f7;
}

.single-product .product-gallery-slider .woocommerce-product-gallery__image a,
.single-product .woocommerce-product-gallery .woocommerce-product-gallery__image a {
    display: block;
    width: 100%;
    height: 100%;
}

/* Ảnh phủ kín khung, cắt phần thừa (object-fit cover) */
.single-product .woocommerce-product-gallery__image img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center !important;
    border-radius: 18px;
    transition: transform 0.5s ease;
}

/* Bo góc cho cả khung gallery */
.single-product .product-gallery {
    border-radius: 18px;
}

/* ── THUMBNAIL (ảnh nhỏ bên trái) ── */
.single-product .product-thumbnails .thumbnail img,
.single-product .woocommerce-product-gallery .flex-control-thumbs li img {
    border-radius: 12px;
    border: 2px solid transparent;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    transition: border-color 0.25s ease, opacity 0.25s ease;
}

.single-product .product-thumbnails .thumbnail img:hover,
.single-product .woocommerce-product-gallery .flex-control-thumbs li img:hover {
    border-color: #d4e8d4;
    opacity: 1;
}

.single-product .product-thumbnails .thumbnail.is-nav-selected img,
.single-product .woocommerce-product-gallery .flex-control-thumbs li img.flex-active {
    border-color: var(--uten-primary, #287b38);
    opacity: 1;
}

/* ════════════════════════════════════════════
   2. KHU VỰC THÔNG TIN SẢN PHẨM
   ════════════════════════════════════════════ */
.single-product .product-info,
.single-product .summary.entry-summary {
    padding-left: 10px;
}

/* Breadcrumb nhỏ gọn */
.single-product .product_meta + .breadcrumbs,
.single-product .woocommerce-breadcrumb {
    font-size: 12px;
    color: #999;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 14px;
}

/* Tên sản phẩm */
.single-product .product-title,
.single-product .product_title {
    font-size: 30px !important;
    font-weight: 800 !important;
    color: #2a2a2a !important;
    line-height: 1.25 !important;
    margin: 0 0 16px !important;
}

/* Giá sản phẩm */
.single-product .price,
.single-product .product-info .price {
    margin-bottom: 18px !important;
}

.single-product .price .amount,
.single-product .price ins .amount {
    font-size: 28px !important;
    font-weight: 800 !important;
    color: var(--uten-primary, #287b38) !important;
}

.single-product .price del .amount {
    font-size: 18px !important;
    color: #aaa !important;
    font-weight: 600 !important;
}

/* Mô tả ngắn */
.single-product .woocommerce-product-details__short-description,
.single-product .product-short-description {
    font-size: 15px !important;
    line-height: 1.75 !important;
    color: #5a5a5a !important;
    padding: 18px 0 !important;
    margin-bottom: 18px !important;
    border-top: 1px solid #f0f0f0 !important;
    border-bottom: 1px solid #f0f0f0 !important;
}

/* ════════════════════════════════════════════
   3. NÚT LIÊN HỆ ĐẶT HÀNG (Catalog Mode)
   ════════════════════════════════════════════ */
.uten-contact-buttons.single-product-contact {
    margin: 8px 0 24px;
}

.uten-contact-label {
    font-size: 14px !important;
    font-weight: 700 !important;
    color: #2a2a2a !important;
    margin-bottom: 12px !important;
}

.uten-contact-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
}

/* Nút liên hệ cơ bản */
.uten-cbtn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 50px;
    padding: 0 14px;
    border-radius: 14px;
    font-size: 14.5px;
    font-weight: 700;
    text-decoration: none;
    line-height: 1;
    border: 1.5px solid transparent;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.06);
    transition: transform 0.2s ease, box-shadow 0.25s ease, background 0.25s ease, color 0.25s ease;
    white-space: nowrap;
}

.uten-cbtn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.14);
}

.uten-cbtn-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.uten-cbtn svg {
    display: block;
}

/* Nút Gọi điện - viền xanh thương hiệu */
.uten-cbtn-call {
    background: #fff;
    border-color: var(--uten-primary, #287b38);
    color: var(--uten-primary, #287b38);
}

.uten-cbtn-call:hover {
    background: var(--uten-primary, #287b38);
    color: #fff;
}

/* Nút Zalo */
.uten-cbtn-zalo {
    background: #0068ff;
    color: #fff;
}

.uten-cbtn-zalo:hover {
    background: #0055d4;
    color: #fff;
}

/* Nút Messenger - gradient đặc trưng */
.uten-cbtn-messenger {
    background: linear-gradient(135deg, #00b2ff 0%, #006aff 100%);
    color: #fff;
}

.uten-cbtn-messenger:hover {
    background: linear-gradient(135deg, #00a0e6 0%, #005ce6 100%);
    color: #fff;
}

/* ── Nút "Đặt hàng" trên trang danh sách (loop) ── */
.uten-contact-buttons.loop-product-contact {
    margin-top: 10px;
}

.uten-cbtn-loop {
    width: 100%;
    height: 42px;
    border-radius: 50px;
    background: var(--uten-primary, #287b38);
    color: #fff;
    font-size: 13.5px;
}

.uten-cbtn-loop:hover {
    background: #1e5a28;
    color: #fff;
}

/* ════════════════════════════════════════════
   4. META & WISHLIST
   ════════════════════════════════════════════ */
.single-product .product_meta {
    font-size: 13px;
    color: #888;
    padding-top: 14px;
    border-top: 1px solid #f0f0f0;
    margin-top: 6px;
}

.single-product .product_meta a {
    color: var(--uten-primary, #287b38);
    font-weight: 600;
}

/* Nút wishlist */
.single-product .yith-wcwl-add-to-wishlist {
    margin: 12px 0 !important;
}

.single-product .yith-wcwl-add-to-wishlist a {
    color: #666 !important;
    font-size: 14px !important;
    font-weight: 600 !important;
}

.single-product .yith-wcwl-add-to-wishlist a:hover {
    color: var(--uten-alert, #d32f2f) !important;
}

/* ── Nút share icon tròn ── */
.single-product .share-icons .icon {
    border-radius: 50% !important;
}

/* ════════════════════════════════════════════
   5. TABS MÔ TẢ / THÔNG TIN BÊN DƯỚI
   ════════════════════════════════════════════ */
.single-product .product-tabs-section,
.single-product .woocommerce-tabs {
    margin-top: 50px;
}

.single-product .woocommerce-tabs ul.tabs {
    border-bottom: 2px solid #f0f7f0;
}

.single-product .woocommerce-tabs ul.tabs li {
    border: none !important;
    background: transparent !important;
    margin: 0 6px -2px 0 !important;
}

.single-product .woocommerce-tabs ul.tabs li a {
    font-weight: 700 !important;
    text-transform: uppercase !important;
    font-size: 14px !important;
    color: #777 !important;
    padding: 12px 20px !important;
    border-bottom: 2px solid transparent !important;
    transition: color 0.2s ease, border-color 0.2s ease !important;
}

.single-product .woocommerce-tabs ul.tabs li.active a,
.single-product .woocommerce-tabs ul.tabs li a:hover {
    color: var(--uten-primary, #287b38) !important;
    border-bottom-color: var(--uten-primary, #287b38) !important;
}

/* ════════════════════════════════════════════
   6. SẢN PHẨM LIÊN QUAN
   ════════════════════════════════════════════ */
.single-product .related.products > h2,
.single-product .up-sells > h2,
.single-product .related-products-title {
    font-size: 26px !important;
    font-weight: 800 !important;
    color: var(--uten-primary, #287b38) !important;
    margin-bottom: 24px !important;
    text-align: center;
}

/* ── RESPONSIVE ── */
@media (max-width: 849px) {
    /* Khoảng đệm đều 2 bên: đặt trên .product-main (bọc gallery + info) */
    .single-product .product-main {
        padding-left: 16px !important;
        padding-right: 16px !important;
        box-sizing: border-box !important;
    }

    /* .product-footer đã có .container bên trong nên thêm đệm nhẹ cho khít */
    .single-product .product-footer > .container {
        padding-left: 16px !important;
        padding-right: 16px !important;
        box-sizing: border-box !important;
    }

    /* Reset padding ngang của các cột con để không cộng dồn lệch */
    .single-product .product-main .content-row > .col,
    .single-product .product-main .product-gallery,
    .single-product .product-main .product-info {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    .single-product .product-info,
    .single-product .summary.entry-summary {
        margin-top: 24px;
    }

    .single-product .product-title,
    .single-product .product_title {
        font-size: 24px !important;
    }

    /* Nút liên hệ trên mobile: Gọi + Zalo 1 hàng, Messenger full hàng dưới */
    .uten-contact-row {
        grid-template-columns: 1fr 1fr;
    }

    .uten-cbtn-messenger {
        grid-column: 1 / -1;
    }

    .uten-cbtn {
        height: 46px;
        font-size: 14px;
    }
}