/* ===================================================================== */
/* CSS TRANG CHI TIẾT SẢN PHẨM Y TẾ (BẢN TỐI ƯU HOÀN CHỈNH CAO CẤP)     */
/* ===================================================================== */

/* ÉP KHÓA CỨNG TUYỆT ĐỐI FONT CHỮ ROBOTO CHO TOÀN BỘ CÁC THẺ TRÊN TRANG */
.product-detail-page, 
.product-detail-page h1, .product-detail-page h2, .product-detail-page h3, 
.product-detail-page p, .product-detail-page span, .product-detail-page a, 
.product-detail-page div, .product-detail-page button, .product-detail-page input, 
.product-detail-page textarea, .mce-content-body * { 
    font-family: 'Roboto', Arial, sans-serif !important; 
}

.product-detail-page { background-color: #f8fafc; padding: 40px 0 80px 0; }
.detail-wrapper { max-width: 1200px; margin: 0 auto; padding: 0 15px; }

/* --- BREADCRUMB --- */
.breadcrumb { font-size: 14px; color: #64748b; margin-bottom: 30px; }
.breadcrumb a { color: #64748b; text-decoration: none; transition: 0.3s; }
.breadcrumb a:hover { color: #1a633a; }
.breadcrumb span { color: #1a633a; font-weight: 600; }

/* --- KHỐI TỔNG QUAN HÀNG ĐẦU --- */
.product-overview-grid {
    display: grid; grid-template-columns: 45% 50%; gap: 5%;
    background: #ffffff; padding: 40px; border-radius: 12px;
    box-shadow: 0 5px 25px rgba(0,0,0,0.03); margin-bottom: 40px;
}

/* Vùng trưng bày Gallery ảnh */
.main-image-box { width: 100%; aspect-ratio: 1 / 1; border: 1px solid #e2e8f0; border-radius: 8px; padding: 20px; display: flex; justify-content: center; align-items: center; margin-bottom: 15px; background: #fff; }
.main-image-box img { width: 100%; height: 100%; object-fit: contain; }
.thumbnail-strip { display: flex; gap: 15px; flex-wrap: wrap; }
.thumb-box { width: 80px; height: 80px; border: 2px solid #e2e8f0; border-radius: 6px; padding: 5px; cursor: pointer; transition: 0.3s; flex-shrink: 0; }
.thumb-box.active, .thumb-box:hover { border-color: #1a633a; }
.thumb-box img { width: 100%; height: 100%; object-fit: contain; }

/* Cột chi tiết chữ bên phải */
.product-brand { font-size: 14px !important; font-weight: 700 !important; color: #475569 !important; text-transform: uppercase; letter-spacing: 1px; display: block; margin-bottom: 10px; }
.product-title { font-size: 34px !important; font-weight: 800 !important; color: #1e293b !important; line-height: 1.4 !important; margin: 0 0 20px 0 !important; }
.product-price-row { margin-bottom: 25px; display: flex; align-items: center; gap: 10px; }
.price-label { font-size: 16px !important; color: #475569 !important; }
.price-value { font-size: 18px !important; font-weight: 800 !important; color: #dc2626 !important; text-transform: uppercase; } 
.product-short-desc p { font-size: 16px !important; color: #475569 !important; line-height: 1.8 !important; margin-bottom: 40px !important; }

/* --- HỆ THỐNG CẶP NÚT BẤM ĐỒNG BỘ MÀU CAM --- */
.product-actions { display: flex; gap: 20px; margin-top: auto; }

.btn-primary-quote { 
    flex: 1; text-align: center; 
    background-color: #ff9800 !important; 
    color: white !important; 
    padding: 16px 25px !important; 
    border-radius: 30px !important; 
    font-size: 16px !important; font-weight: bold !important; text-decoration: none !important; 
    border: none !important; cursor: pointer; transition: all 0.3s ease !important; 
    box-shadow: 0 2px 5px rgba(255, 152, 0, 0.3) !important;
}
.btn-primary-quote i { margin-right: 5px; }
.btn-primary-quote:hover { 
    background-color: #e68a00 !important; 
    transform: translateY(-2px) !important; 
    box-shadow: 0 4px 8px rgba(255, 152, 0, 0.4) !important; 
}

.btn-secondary-call { 
    flex: 1; text-align: center; background: white !important; color: #1a633a !important; 
    border: 2px solid #1a633a !important; padding: 16px 25px !important; 
    border-radius: 30px !important; 
    font-size: 16px !important; font-weight: bold !important; text-decoration: none !important; transition: 0.3s !important; 
}
.btn-secondary-call i { margin-right: 5px; }
.btn-secondary-call:hover { background: #1a633a !important; color: white !important; }

/* --- HỆ THỐNG 3 TABS THÔNG TIN --- */
.tabs-container { background: #fff; border-radius: 12px; border: 1px solid #e2e8f0; margin-bottom: 40px; overflow: hidden; box-shadow: 0 4px 15px rgba(0,0,0,0.02); }
.tabs-header { display: flex; background: #f8fafc; border-bottom: 1px solid #e2e8f0; }
.tab-btn { flex: 1; padding: 20px 10px; border: none; background: none; font-size: 16px !important; font-weight: 700 !important; color: #64748b !important; cursor: pointer; transition: 0.3s; border-bottom: 3px solid transparent; }
.tab-btn i { margin-right: 8px; }
.tab-btn:hover { color: #1a633a !important; background: #f1f5f9; }
.tab-btn.active { color: #1a633a !important; border-bottom-color: #1a633a !important; background: #fff; }
.tab-content { display: none; padding: 40px; animation: fadeIn 0.4s ease; }
.tab-content.active { display: block; }

/* --- KHỐI ĐỊNH DẠNG VĂN BẢN TINYMCE --- */
.mce-content-body { color: #334155 !important; line-height: 1.8 !important; font-size: 15px !important; }
.mce-content-body p { margin-bottom: 20px !important; font-size: 15px !important; }
.mce-content-body ul, .mce-content-body ol { padding-left: 25px !important; margin-bottom: 25px !important; }
.mce-content-body li { margin-bottom: 10px !important; font-size: 15px !important; }
.mce-content-body strong { color: #1e293b !important; }
.mce-content-body table { width: 100% !important; border-collapse: collapse !important; margin: 20px 0 !important; border: 1px solid #cbd5e1 !important; border-radius: 8px !important; overflow: hidden !important; }
.mce-content-body table td, .mce-content-body table th { padding: 12px 15px !important; border: 1px solid #e2e8f0 !important; vertical-align: top !important; font-size: 15px !important; }
.mce-content-body table tr:nth-child(odd) { background-color: #f8fafc !important; }
.mce-content-body table td:first-child { width: 30% !important; font-weight: 600 !important; color: #1e293b !important; }

/* --- KHỐI BÌNH LUẬN & THẢO LẶN --- */
.product-reviews-section { background: #ffffff; padding: 40px; border-radius: 12px; box-shadow: 0 5px 25px rgba(0,0,0,0.03); margin-bottom: 40px; }
.section-heading { font-size: 20px !important; color: #1a633a !important; font-weight: 800 !important; border-bottom: 2px solid #e2e8f0; padding-bottom: 15px; margin-bottom: 25px; text-transform: uppercase; }
.review-form-box { background: #f8fafc; padding: 30px; border-radius: 8px; border: 1px solid #e2e8f0; margin-bottom: 40px; }
.review-form .form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 20px; }
.review-form input, .review-form textarea { width: 100%; padding: 14px 15px; border: 1px solid #cbd5e1; border-radius: 6px; font-size: 15px !important; }
.review-form input:focus, .review-form textarea:focus { border-color: #1a633a; outline: none; box-shadow: 0 0 0 3px rgba(26,99,58,0.1); }
.btn-submit-review { background: #1a633a !important; color: white !important; border: none !important; padding: 14px 30px !important; border-radius: 30px !important; font-weight: bold !important; font-size: 15px !important; cursor: pointer; transition: 0.3s; }
.btn-submit-review i { margin-right: 8px; }
.btn-submit-review:hover { background: #114227 !important; transform: translateY(-2px); }
.comment-count { font-size: 18px !important; color: #1e293b !important; font-weight: 700 !important; margin-bottom: 25px !important; padding-bottom: 15px; border-bottom: 1px dashed #e2e8f0; }
.comment-item { display: flex; gap: 20px; margin-bottom: 25px; padding-bottom: 25px; border-bottom: 1px dashed #e2e8f0; }
.comment-item:last-child { margin-bottom: 0; padding-bottom: 0; border-bottom: none; }
.comment-avatar { width: 50px; height: 50px; background: #e2e8f0; color: #64748b; font-weight: 800; font-size: 18px; border-radius: 50%; display: flex; justify-content: center; align-items: center; flex-shrink: 0; text-transform: uppercase; }
.comment-body { flex: 1; }
.comment-meta { margin-bottom: 8px; display: flex; align-items: baseline; gap: 10px; }
.comment-author { font-weight: 700 !important; color: #1e293b !important; font-size: 16px !important; }
.comment-date { color: #94a3b8 !important; font-size: 13px !important; }
.comment-text { font-size: 15px !important; color: #475569 !important; line-height: 1.6 !important; }
.comment-reply { background: #f1f8f4; padding: 20px; border-radius: 8px; margin-top: 15px; border-left: 4px solid #1a633a; }
.reply-meta { margin-bottom: 8px; display: flex; align-items: baseline; gap: 10px; }
.reply-author { font-weight: 700 !important; color: #1a633a !important; font-size: 15px !important; }
.reply-text { font-size: 15px !important; color: #334155 !important; line-height: 1.6 !important; margin: 0 !important; }

/* --- KHỐI SẢN PHẨM LIÊN QUAN --- */
.product-detail-page .product-grid { 
    display: grid !important; 
    grid-template-columns: repeat(4, 1fr) !important; 
    gap: 25px !important; 
    overflow-x: hidden !important; 
}
.product-detail-page .product-card { 
    border: 1px solid #e2e8f0; 
    border-radius: 8px; 
    padding: 15px; 
    background: #ffffff; 
    text-align: center; 
    display: flex; 
    flex-direction: column; 
    transition: 0.3s; 
    flex: none !important; 
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important; 
}
.product-detail-page .product-card:hover { transform: translateY(-5px); box-shadow: 0 5px 15px rgba(0,0,0,0.05); }

/* ĐÃ FIX TOÀN CỤC (PC & MOBILE): Xóa sạch cục xám và tỷ lệ vuông của home.css */
.product-detail-page .product-img-link { 
    display: flex !important;
    justify-content: center;
    align-items: center;
    margin-bottom: 15px; 
    aspect-ratio: auto !important; /* Phá ngoặc hình vuông */
    background-color: transparent !important; /* Xóa nền xám */
    height: auto !important;
}
.product-detail-page .product-img-link img { 
    width: auto !important; 
    height: 200px !important; 
    max-width: 100% !important;
    object-fit: contain; 
    background: transparent !important; 
    border-radius: 6px; 
}

/* ĐÃ FIX VẠCH ĐEN TOÀN CỤC: Cố định chặt chẽ chiều cao tiêu đề */
.product-detail-page .product-title-link { 
    color: #1e293b !important; 
    text-decoration: none; 
    font-size: 16px !important; 
    font-weight: bold !important; 
    display: -webkit-box; 
    -webkit-line-clamp: 2; 
    -webkit-box-orient: vertical; 
    overflow: hidden; 
    line-height: 22px !important; /* Khóa chiều cao dòng */
    height: 44px !important; /* Tổng chiều cao 2 dòng ĐÚNG 44px */
    margin-bottom: 10px;
}
.product-detail-page .product-card h3 { margin: 0; flex-grow: 1; font-size: inherit; }

.product-detail-page .product-card .price { color: #b91c1c !important; font-size: 18px !important; font-weight: bold !important; margin: 0 0 15px 0 !important; }
.product-detail-page .btn-detail { display: block; padding: 10px; background: #f1f5f9; color: #1e293b !important; text-decoration: none; border-radius: 6px; font-weight: bold !important; border: 1px solid #cbd5e1; transition: 0.2s; text-transform: uppercase; font-size: 13px !important;}
.product-detail-page .btn-detail:hover { background: #1a633a; color: white !important; }

/* Thông báo cảnh báo trạng thái */
.alert-success { background: #dcfce7; color: #15803d; padding: 15px 20px; border-radius: 8px; margin-bottom: 25px; font-weight: bold; border-left: 4px solid #15803d; }
.alert-error { background: #fee2e2; color: #b91c1c; padding: 15px 20px; border-radius: 8px; margin-bottom: 25px; font-weight: bold; border-left: 4px solid #b91c1c; }

/* --- RESPONSIVE TABLET & MOBILE --- */
@media (max-width: 992px) {
    .product-overview-grid { grid-template-columns: 1fr; gap: 30px; }
    .tabs-header { flex-direction: column; }
    .tab-btn { border-bottom: 1px solid #e2e8f0; border-left: 4px solid transparent; text-align: left; padding: 15px 20px; }
    .tab-btn.active { border-bottom-color: #e2e8f0; border-left-color: #1a633a !important; }
    .review-form .form-grid { grid-template-columns: 1fr; gap: 15px; }
    .product-actions { flex-direction: column; gap: 15px; }
    .product-detail-page .product-grid { grid-template-columns: repeat(2, 1fr) !important; }
}

/* ===================================================================== */
/* BẢN VÁ: RESPONSIVE CHO SMARTPHONE (DƯỚI 768px) - VUỐT TRƯỢT NGANG     */
/* ===================================================================== */
@media (max-width: 768px) {
    .product-overview-grid { padding: 15px; } 
    .product-title { font-size: 24px !important; line-height: 1.3 !important; } 
    .tab-content { padding: 15px; } 
    .product-reviews-section { padding: 15px; } 
    
    /* Chuyển khối Grid thành Flexbox trượt ngang mượt mà trên Mobile */
    .product-detail-page .product-grid { 
        display: flex !important; 
        overflow-x: auto !important; 
        gap: 15px !important;
        padding-bottom: 15px !important; 
        scroll-snap-type: x mandatory !important; 
        -webkit-overflow-scrolling: touch !important; 
    }

    /* Ẩn thanh cuộn ngang xấu xí trên điện thoại */
    .product-detail-page .product-grid::-webkit-scrollbar {
        display: none !important;
    }
    
    /* Ép thẻ card rộng 75% để lấp ló thẻ thứ 2 mời gọi vuốt */
    .product-detail-page .product-card {
        flex: 0 0 75% !important; 
        scroll-snap-align: start !important; 
    }

    /* TRỊ BỆNH ẢNH THU NHỎ LÀM VỠ MÀN HÌNH */
    .thumbnail-strip { gap: 10px; justify-content: flex-start; }
    .thumb-box { width: 55px; height: 55px; } 
}