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

/*************** ADD CUSTOM CSS HERE.   ***************/
/* --- BREADCRUMBS RANK MATH --- */
.mtk-breadcrumbs .row .col{
	padding: 10px 0 !important;
    margin-bottom: 25px;
    border-bottom: 1px dashed rgba(34,36,49,.45);
    font-size: 0.8em;
    color: #666;
}
.mtk-breadcrumbs p{
	margin-bottom: 0;
}
.mtk-breadcrumbs a {
    color: #333;
    transition: color 0.3s;
}
.mtk-breadcrumbs a:hover {
    color: #f7a33e;
}
/* --- SECTION: THAM KHẢO THÊM --- */
.mtk-related-title {
    color: #3b82f6 !important;
    font-weight: 700;
    text-transform: uppercase;
    margin-bottom: 20px;
    font-size: 1.25em;
}

/* Layout Card Tham Khảo */
.mtk-related-card {
    margin-bottom: 25px;
}
/* --- CARD SẢN PHẨM: ẢNH TỶ LỆ 16:9 CHUẨN --- */
.mtk-related-img {
    position: relative;
    width: 100%;
    padding-top: 56.25%; /* CÔNG THỨC 16:9 */
    overflow: hidden;
    border: 1px solid #eee;
}
.mtk-related-img a {
    display: block;
}
.mtk-related-img img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}
.mtk-related-img:hover img {
    transform: scale(1.05); /* Zoom nhẹ thêm chút cho mượt */
    opacity: 0.9;
}
.mtk-related-content {
    padding-top: 15px;
}
.mtk-related-post-title {
    font-size: 1.05em;
    font-weight: bold;
    margin-bottom: 10px;
    line-height: 1.4;
}
.mtk-related-post-title a {
    color: #222;
}
.mtk-related-post-title a:hover {
    color: #f7a33e;
}

/* Swatch màu hình vuông trong Tham khảo thêm */
.mtk-related-swatches {
    display: flex;
    gap: 6px;
    margin-bottom: 10px;
}
.mtk-related-swatch-item {
    display: inline-block;
    width: 18px;
    height: 18px;
    border: 1px solid #ddd;
    box-shadow: 0 1px 2px rgba(0,0,0,0.05);
}

/* Meta Data (Chất liệu, Kiểu dáng) */
.mtk-related-meta {
    font-size: 0.9em;
    line-height: 1.6;
    margin-bottom: 8px;
}
.mtk-related-meta .meta-label {
    color: #888;
}
.mtk-related-meta .meta-value {
    color: #222;
    font-weight: bold;
}

/* Star Rating */
.mtk-related-stars {
    color: #f5a623; /* Màu vàng cam của sao */
    font-size: 14px;
    letter-spacing: 2px;
}
/* ==========================================================
   1. BOX LÝ DO CHỌN CHÚNG TÔI (Chuẩn như ảnh mẫu)
   ========================================================== */
.custom-reasons-box {
    border: 1px solid #48bb78;
    border-radius: 8px;
    padding: 22px 15px 15px; /* Đẩy padding top rộng ra để nhường chỗ cho tiêu đề */
    position: relative; /* Setup để tiêu đề absolute nhảy lên viền */
    margin-top: 25px; /* Khoảng cách với Giá ở trên */
    margin-bottom: 20px;
    background: #fff;
}

/* Tiêu đề viên thuốc (Pill) nằm đè lên viền trên cùng */
.custom-reasons-box .reason-title {
    position: absolute;
    top: 0;
    left: 15px;
    transform: translateY(-50%); /* Cắt ngang viền */
    margin: 0;
}

.custom-reasons-box .reason-title span {
    background-color: #48bb78;
    color: #fff;
    padding: 4px 18px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 600;
}

/* Ép WYSIWYG list thành Grid 2 cột & gắn icon tick xanh */
.custom-reasons-box .wysiwyg-content ul {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
    display: grid;
    grid-template-columns: 1fr 1fr; /* Chia 2 cột như ảnh */
    gap: 12px 15px;
}

.custom-reasons-box .wysiwyg-content ul li {
    position: relative;
    padding-left: 22px; /* Khoảng trống cho icon */
    font-size: 13px;
    color: #333;
    line-height: 1.4;
    margin: 0 !important;
}

/* Tự động chèn Tick xanh SVG */
.custom-reasons-box .wysiwyg-content ul li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 2px;
    width: 14px;
    height: 14px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath fill='%2348bb78' d='M438.6 105.4c12.5 12.5 12.5 32.8 0 45.3l-256 256c-12.5 12.5-32.8 12.5-45.3 0l-128-128c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0L160 338.7 393.4 105.4c12.5-12.5 32.8-12.5 45.3 0z'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
}
/* ==========================================================
   2. BOX THÔNG SỐ KỸ THUẬT (Cột trái - Layout 2 Cột)
   ========================================================== */
.left-column-specs-box {
    background: #f4f5f7; /* Màu nền xám nhạt toàn box */
    border-radius: 4px;
    margin-top: 25px;
    overflow: hidden; /* Để giữ góc bo tròn cho cả title */
    border: 1px solid #e2e8f0;
}

/* Thanh tiêu đề có nền màu tối hơn một chút */
.left-column-specs-box .specs-title {
    background: #e2e8f0; 
    text-align: center;
    font-size: 14px;
    font-weight: 700;
    color: #2d3748;
    margin: 0;
    padding: 12px 15px;
    text-transform: uppercase;
}

/* Biến Container chứa các dòng thành Grid 2 cột */
.left-column-specs-box .specs-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* Chia đều 2 cột */
    column-gap: 30px; /* Khoảng cách giữa 2 cột */
    row-gap: 12px; /* Khoảng cách giữa các dòng */
    padding: 20px;
}

/* Định dạng từng cặp Label - Value */
.left-column-specs-box .spec-row {
    display: flex;
    justify-content: flex-start;
    align-items: baseline;
    font-size: 14px;
    gap: 8px; /* Khoảng cách giữa nhãn và giá trị */
    border-bottom: none; /* Xóa viền đứt đoạn cũ */
    padding: 0;
}

.left-column-specs-box .spec-label {
    font-weight: 600;
    color: #2d3748;
    white-space: nowrap; /* Tránh rớt dòng chữ của nhãn */
}

.left-column-specs-box .spec-value {
    color: #4a5568;
    word-break: break-word;
}

.left-column-specs-box .spec-value a {
    color: #3182ce; /* Màu link cho danh mục */
    text-decoration: none;
}

.left-column-specs-box .spec-value a:hover {
    text-decoration: underline;
}

/* Responsive: Chuyển về 1 cột khi xem trên điện thoại */
@media (max-width: 767px) {
    .left-column-specs-box .specs-list {
        grid-template-columns: 1fr;
    }
}

/* ==========================================================
   3. NÚT ĐẶT HÀNG & BANNER
   ========================================================== */
.custom-action-area {
    margin-top: 25px;
}

.action-buttons-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
    margin-bottom: 15px;
}

.action-buttons-grid .btn-custom {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 10px;
    border-radius: 4px;
    color: #fff;
    text-decoration: none;
    transition: all 0.3s ease;
}

.action-buttons-grid .btn-custom:hover {
    opacity: 0.85;
}

.btn-custom .btn-title {
    font-size: 14px;
    font-weight: bold;
    margin-bottom: 2px;
}

.btn-custom .btn-sub {
    font-size: 12px;
    font-weight: normal;
}

.btn-orange { background-color: #f39c12; }
.btn-navy { background-color: #2c3e50; }

.action-banner img {
    width: 100%;
    height: auto;
    border-radius: 4px;
    display: block;
}

/* Mobile Responsive */
@media (max-width: 767px) {
    .custom-reasons-box .wysiwyg-content ul { grid-template-columns: 1fr; }
    .action-buttons-grid { grid-template-columns: 1fr; }
}

/* Responsive: Chuyển về 1 cột trên Mobile */
@media (max-width: 549px) {
    .custom-reasons-wysiwyg-box .wysiwyg-content ul {
        grid-template-columns: 1fr;
    }
}
/* ==========================================================
   ĐỊNH DẠNG GIÁ SẢN PHẨM (Chuẩn ảnh 1)
   ========================================================== */
.single-product .product-info .price-wrapper .price {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 25px; /* Tạo khoảng cách với nút Add to cart */
    padding-top: 10px;
}

/* Thêm chữ "Giá:" */
.single-product .product-info .price-wrapper .price::before {
    content: "Giá:";
    font-size: 16px;
    color: #333;
    font-weight: 500;
}

/* Đảo Giá Khuyến Mãi lên trước (bên trái) */
.single-product .product-info .price-wrapper .price ins {
    order: 1;
    text-decoration: none;
    color: #e3342f; /* Màu đỏ */
    font-size: 28px;
    font-weight: 700;
}

/* Đảo Giá Gốc ra sau (bên phải) */
.single-product .product-info .price-wrapper .price del {
    order: 2;
    color: #a0aec0; /* Màu xám */
    font-size: 20px;
    font-weight: 500;
}

/* Tinh chỉnh size ký hiệu tiền tệ (đ) */
.single-product .product-info .price-wrapper .price ins .woocommerce-Price-currencySymbol,
.single-product .product-info .price-wrapper .price del .woocommerce-Price-currencySymbol {
    font-size: 0.75em;
    vertical-align: top;
    margin-left: 2px;
}
/* ==========================================================
   TÙY BIẾN GIAO DIỆN PRODUCT LOOP (TRANG DANH MỤC)
   ========================================================== */

/* 1. Ép căn trái toàn bộ nội dung text */
.products .product-small .box-text {
    text-align: left;
}

/* 2. Khối Đánh giá & Số lượng bán (Flexbox 2 bên) */
.product-small .custom-loop-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px; /* Tách biệt với giá */
    font-size: 12px;
    color: #888;
}

.product-small .custom-loop-meta .product-rating {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    gap: 2px;
    color: #f39c12; /* Màu vàng cam cho ngôi sao */
    font-size: 11px;
}
.product-small .custom-loop-meta ul.product-rating li{
	margin-left: 0;
}
/* 3. Định dạng Giá tiền (Giống ảnh 1) */
.products .product-small .price-wrapper .price {
    display: flex;
    align-items: baseline;
    gap: 10px;
}
/* Giá Khuyến mãi (Màu đen, đậm, nằm trước) */
.products .product-small .price-wrapper .price ins {
    color: #000;
    font-size: 15px;
    font-weight: 700;
    text-decoration: none;
    order: 1; 
}
/* Giá Gốc (Màu đỏ, gạch ngang, nằm sau) */
.product-small .price-wrapper .price del {
    color: #e3342f;
    font-size: 13px;
    order: 2; 
}
/* 4. Khối Quà tặng (Miễn phí thi công) */
.product-small .custom-loop-gift {
    list-style: none;
    padding: 0;
    margin: 10px 0 0 0;
    font-size: 12px;
    color: #38a169;
}
.product-small .custom-loop-gift li {
    display: flex;
    align-items: center;
    gap: 5px;
	margin-left: 0;
}
.product-small .custom-loop-gift i {
    font-size: 14px;
    font-weight: bold;
}
/* ==========================================================
   TÙY BIẾN KHỐI THÔNG TIN TÁC GIẢ BÀI VIẾT (SINGLE POST META)
   ========================================================== */
.custom-single-post-meta {
    background-color: #f4f5f7; /* Màu nền xám nhạt */
    padding: 10px 15px;
    border-radius: 4px;
    margin-bottom: 20px;
    margin-top: 15px;
    display: flex;
    align-items: center;
    flex-wrap: wrap; /* Tránh vỡ khung trên màn hình mobile quá bé */
}

/* Khung Avatar */
.custom-single-post-meta .meta-author-avatar {
    width: 35px;
    height: 35px;
    border-radius: 50%;
    overflow: hidden;
    margin-right: 12px;
    flex-shrink: 0;
}

.custom-single-post-meta .meta-author-avatar img {
    width: 100%;
    height: auto;
    display: block;
}

/* Tên tác giả */
.custom-single-post-meta .meta-author-name {
    color: #222431;
    font-weight: 700;
    font-size: 14px;
    text-decoration: none;
    transition: color 0.3s;
}

.custom-single-post-meta .meta-author-name:hover {
    color: #f27c38; /* Màu cam khi di chuột vào tên tác giả */
}

/* Thời gian đăng bài */
.custom-single-post-meta .meta-date-time {
    margin-left: 8px;
    font-size: 13px;
    color: #888;
}
/* ==========================================================
   META BOTTOM: THỜI GIAN CẬP NHẬT & SHARE BUTTONS
   ========================================================== */
.single-post-meta-bottom {
    background-color: #f4f5f7;
    padding: 10px 15px;
    border-radius: 4px;
	display: flex;
    justify-content: space-between;
    align-items: center;
}

.single-post-meta-bottom .update-time {
    color: #666;
    font-size: 14px;
}

.single-post-meta-bottom .social-share-button {
    display: flex;
    gap: 8px;
}

/* Định dạng chung cho nút bấm */
.single-post-meta-bottom .social {
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%; 
    color: #fff;
    text-decoration: none;
    width: 34px;
    height: 34px;
    font-size: 14px; 
    transition: opacity 0.3s, transform 0.2s;
    border: none;
    cursor: pointer;
    padding: 0;
	margin: 0;
}

.single-post-meta-bottom .social:hover {
    opacity: 0.85;
    transform: translateY(-2px); /* Hiệu ứng nảy nhẹ khi hover */
    color: #fff;
}

/* Màu sắc từng mạng xã hội */
.social-twitter { background-color: #00aced; }
.social-facebook { background-color: #3b5998; }
.social-linkedin { background-color: #007bb6; }
.social-pinterest { background-color: #cb2027; }
.social-copy { background-color: #4a5568; } /* Màu xám đậm cho nút copy */

/* Bỏ viền xanh khi focus vào button copy */
.social-copy:focus {
    outline: none;
}

/* Responsive trên Mobile: Rớt dòng nếu màn quá hẹp */
@media screen and (max-width: 550px) {
    .single-post-meta-bottom {
        flex-direction: column;
        align-items: flex-start !important;
        gap: 15px;
    }
    .single-post-meta-bottom .social-share-button {
        margin-left: 0 !important; /* Xóa ml-auto */
    }
}
/* ==========================================================
   GIAO DIỆN FORM BÌNH LUẬN
   ========================================================== */
.custom-reply-title {
    font-size: 16px;
    font-weight: 700;
    text-transform: uppercase;
    color: #333;
    display: block;
    margin-bottom: 15px;
}

/* Lưới 2 cột cho Tên & Email */
.custom-comment-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
}

.custom-comment-grid p {
    margin-bottom: 0; /* Xóa margin thừa của p */
}

/* Định dạng Input & Textarea */
#respond input[type="text"],
#respond input[type="email"],
#respond textarea {
    width: 100%;
    border: 1px solid #ddd;
    padding: 12px 15px;
    border-radius: 3px;
    box-shadow: none !important;
    background-color: #fff;
    font-size: 14px;
    transition: border-color 0.3s;
}

#respond input:focus,
#respond textarea:focus {
    border-color: #2196F3;
    outline: none;
}

#respond textarea {
    min-height: 120px;
}

/* Nút Gửi Bình Luận */
#respond .btn-custom-submit {
    background-color: #2196F3 !important; /* Màu xanh dương chuẩn Material */
    color: #ffffff !important;
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    padding: 10px 25px;
    border: none;
    border-radius: 3px !important;
    cursor: pointer;
    transition: background-color 0.3s ease;
    margin-top: 10px;
}

#respond .btn-custom-submit:hover {
    background-color: #0b7dda !important;
}

/* Responsive Form */
@media screen and (max-width: 550px) {
    .custom-comment-grid {
        grid-template-columns: 1fr;
        gap: 0;
    }
    .custom-comment-grid p {
        margin-bottom: 15px;
    }
}

/* ==========================================================
   1. SỬA LỖI DANH SÁCH BÌNH LUẬN (AUTHOR & REPLY)
   ========================================================== */

/* Xóa chữ "cho biết:" mặc định của Flatsome */
.comment-list .comment-author .says {
    display: none !important;
}

/* Tên người dùng: Màu cam, in đậm, bỏ in nghiêng */
.comment-list .comment-author cite,
.comment-list .comment-author cite a {
    color: #f27c38 !important;
    font-weight: 700 !important;
    font-style: normal !important;
    font-size: 15px !important;
    text-decoration: none !important;
}

/* Avatar: Hơi vuông bo góc (giống ảnh mẫu, không tròn xoe) */
.comment-list .comment-author img.avatar {
    border-radius: 4px !important;
    width: 50px !important;
    height: 50px !important;
}

/* Căn chỉnh nội dung sát lên trên */
.comment-list li.comment .comment-body {
    position: relative; /* Mỏ neo cho nút Trả Lời */
    padding-top: 0 !important; 
    border-bottom: 1px solid #eee;
    padding-bottom: 15px;
}

/* Ép nút "TRẢ LỜI" lên góc phải trên cùng */
.comment-list .comment-body .reply {
    position: absolute !important;
    top: 0 !important;
    right: 0 !important;
    margin: 0 !important;
}

.comment-list .comment-body .reply a {
    color: #f27c38 !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    font-size: 13px !important;
    text-decoration: none !important;
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    display: flex;
    align-items: center;
    gap: 5px;
}

/* Icon mũi tên cong cho nút Trả Lời (Dùng FontAwesome 6) */
.comment-list .comment-body .reply a::before {
    font-family: "Font Awesome 6 Free";
    content: "\f3e5"; /* Mã icon fa-reply */
    font-weight: 900;
    font-size: 15px;
}

.comment-list .comment-body .reply a:hover {
    color: #d86826 !important;
}

/* ==========================================================
   2. SỬA LỖI KHUNG FORM BÌNH LUẬN (BÊN DƯỚI)
   ========================================================== */

/* Phá cái nền xám bao quanh form mặc định của Flatsome */
#respond {
    background-color: transparent !important;
    padding: 0 !important;
    border: none !important;
}

/* Tiêu đề "NỘI DUNG BÌNH LUẬN" */
.custom-reply-title {
    font-size: 15px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    color: #333 !important;
    display: block !important;
    margin-bottom: 15px !important;
    margin-top: 20px !important;
}

/* Lưới 2 cột cho Họ tên & Email */
.custom-comment-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
}
.custom-comment-grid p { margin-bottom: 0 !important; }

/* Ép form input trắng, viền mỏng, không có bóng râm (shadow) */
#respond textarea,
#respond input[type="text"],
#respond input[type="email"] {
    width: 100% !important;
    background-color: #fff !important;
    border: 1px solid #ddd !important;
    box-shadow: none !important; /* Xóa bóng chìm của theme */
    border-radius: 2px !important;
    padding: 12px 15px !important;
    font-size: 14px !important;
}

#respond textarea:focus,
#respond input:focus {
    border-color: #2196F3 !important;
    outline: none !important;
}

/* Nút "GỬI BÌNH LUẬN" màu xanh dương */
#respond .btn-custom-submit {
    background-color: #2196F3 !important;
    color: #fff !important;
    border-radius: 2px !important;
    padding: 12px 25px !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    border: none !important;
    box-shadow: none !important;
    margin-top: 10px !important;
}

#respond .btn-custom-submit:hover {
    background-color: #0b7dda !important;
}
/* Responsive Mobile */
@media screen and (max-width: 550px) {
    .custom-comment-grid {
        grid-template-columns: 1fr;
        gap: 15px;
    }
}
.custom-quote-form {
    width: 100%;
    max-width: 600px;
    margin: 0 auto;
}
/* Phần Header */
.custom-quote-wrapper .form-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 20px;
    border-bottom: 1px solid #eaeaea;
}

.custom-quote-wrapper .form-header h3 {
    margin: 0;
    font-size: 20px;
    font-weight: bold;
    color: #333;
    text-transform: uppercase;
}

.custom-quote-wrapper .form-header .close-btn {
    font-size: 18px;
    color: #999;
    cursor: pointer;
    font-weight: bold;
}
.custom-quote-form .form-row {
    display: flex;
    gap: 15px;
    margin-bottom: 15px;
}

.custom-quote-form .form-col {
    flex: 1;
}

.custom-quote-form .form-col-full {
    width: 100%;
}
.custom-quote-form input,.custom-quote-form textarea{
	margin-bottom: 0 !important;
}
.custom-quote-form input[type="text"],
.custom-quote-form input[type="tel"],
.custom-quote-form textarea {
    width: 100%;
    padding: 10px 15px;
    border: 1px solid #ddd;
    border-radius: 4px;
    box-sizing: border-box;
}

.custom-quote-form textarea {
    resize: vertical;
}

.custom-quote-form .submit-row input[type="submit"] {
    width: 100%;
    background-color: #f39c12;
    color: #fff;
    padding: 0 15px;
    border: none;
    border-radius: 4px;
    font-weight: bold;
    font-size: 16px;
    cursor: pointer;
    text-transform: uppercase;
}

.custom-quote-form .submit-row input[type="submit"]:hover {
    background-color: #e67e22;
}

.custom-quote-form .form-note {
    font-size: 13px;
    color: #666;
    margin-top: 10px;
    line-height: 1.5;
}

/* Responsive cho mobile */
@media (max-width: 480px) {
    .custom-quote-form .form-row {
        flex-direction: column;
        gap: 15px;
    }
}
@media only screen and (max-width: 48em) {
/*************** ADD MOBILE ONLY CSS HERE  ***************/
	.mtk-breadcrumbs{
		padding: 0 15px;
	}

}