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

/*************** ADD CUSTOM CSS HERE.   ***************/
.page-id-121 .sec-form, .page-id-123 .sec-form {display:none!important;}
.sec-form {border-top: 4px solid #f7f7f7;}
/* Áp dụng nền cho cả body và làm trong suốt wrapper */
#main {/* Dùng linear-gradient để tạo lớp phủ trắng (255,255,255) đè lên ảnh */background-image: linear-gradient(rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.9)), url("/wp-content/uploads/2026/02/background-02-3.jpg") !important;background-repeat: repeat !important; background-color: #fafafa !important; }
.header-bottom,.footer-section {position: relative;}
.particles-bg {position: absolute;inset: 0;width: 100%;height: 100%;z-index: 0;pointer-events: none;}
.header-bottom > *,.footer-section > * {z-index: 2;}
.product-section-title-related {text-align: center;font-size: 1.5em;}
/* Ẩn nút Activate Theme trên thanh Admin Bar */
#wp-admin-bar-flatsome-activate {display: none !important;}
/* Ẩn luôn nút Flatsome Panel bên cạnh (nếu muốn cho gọn) */
#wp-admin-bar-flatsome_panel {display: none !important;}
.header-language-dropdown .image-icon img {padding: 0px 0px 5px 5px;}
.top-divider {opacity: 1;}
.header-bottom {border-bottom: 1px solid currentColor;border-top: 1px solid currentColor;}
.nav>li>a:hover, .nav>li.active>a {color:#a71b29;}
.nav>li>a {color: rgb(0 0 0 / 100%);}
/* CSS định dạng (Giữ nguyên như cũ) */
.contact-list {display: flex;flex-direction: column;gap: 15px; /* Khoảng cách giữa các dòng */}
.contact-item {display: flex; /* Flexbox giúp chia cột icon và text */align-items: flex-start; /* Icon luôn nằm trên cùng */line-height: 1.5;font-size: 15px;color: #fff;}
.contact-icon {flex: 0 0 24px; /* Cố định chiều rộng icon */width: 24px;height: 24px;margin-right: 12px;display: flex;align-items: center;color: #c0242b; /* Màu đỏ rượu vang */}
.contact-icon svg {width: 100%;height: 100%;fill: currentColor;}
.contact-text {flex: 1; /* Text chiếm hết phần còn lại */word-break: break-word; /* Tự động ngắt dòng nếu email quá dài */}
.contact-text strong {font-weight: 700;}
.product-small .product-title {font-weight:bold;}
.sec-sp-home .col {padding: 0 15px 0px;}
.product-main {padding: 18px 0;}
label, legend {font-weight: normal;}
.sec-form .row-small>.col {padding: 0 9.8px 1px;}
.button.secondary:not(.is-outline) {background-color: #aaa!important;border-radius: 10px;}
#header .top-divider {border:0px;}
button i, .button i {top: auto;}
.blog-single .entry-content {padding-top: 0em;}
.nav-dropdown>li>a {color: rgb(0 0 0);}
.nav-dropdown {min-width: 330px;}
/* Làm đẹp font Times New Roman */
h1, h2, h3, h4, h5, h6 {letter-spacing: 0.5px; /* Giãn chữ ra một chút */}
/* Đổi font toàn bộ web sang Times New Roman */
/* --- FIX LỖI FONT CHO WEBSITE & ADMIN BAR --- */
/* Ẩn chữ 'Đăng ngày' và 'Bởi', chỉ giữ lại ngày tháng và tên */
.post-meta-info, 
.entry-meta {
    font-size: 0 !important; /* Thu nhỏ chữ thừa về 0 */
}

.post-meta-info time, 
.post-meta-info a,
.entry-meta time, 
.entry-meta a {
    font-size: 14px !important; /* Hiện lại ngày tháng và tên tác giả */
    display: inline-block;
}

/* Thêm icon cho sinh động (Tùy chọn) */
.post-meta-info time:before,
.entry-meta time:before {
    content: "\f017"; /* Icon đồng hồ */
    font-family: "FontAwesome";
    margin-right: 5px;
    color: #b09855; /* Màu vàng */
}

.post-meta-info .byline a:before,
.entry-meta .byline a:before {
    content: "\f007"; /* Icon người */
    font-family: "FontAwesome";
    margin-right: 5px;
    margin-left: 15px; /* Cách xa ngày tháng ra chút */
    color: #b09855;
}
/* 1. Áp dụng Times New Roman cho các thẻ văn bản chính */
/* (Mình đã bỏ thẻ 'span', 'div', 'i' ra khỏi danh sách để không làm hỏng icon) */
body, p, a, li, strong, b, input, textarea, select,
h1, h2, h3, h4, h5, h6, .product-title, .section-title {font-family: "Times New Roman", Times, serif !important;}
/* 2. TRẢ LẠI FONT MẶC ĐỊNH CHO THANH ADMIN BAR (Để không bị lỗi giao diện quản trị) */
#wpadminbar * {font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important;}

/* 3. CỨU CÁC ICON (QUAN TRỌNG) */
/* Đảm bảo icon Admin Bar (Dashicons) hiển thị đúng */
#wpadminbar .ab-icon:before, 
#wpadminbar .ab-item:before {font-family: dashicons !important;}

/* Đảm bảo icon của Flatsome (Giỏ hàng, Kính lúp...) ngoài trang chủ không bị lỗi 
[class*="icon-"], [class*="fl-"], .fa, .fas, .far, .fab {
    font-family: "fl-icons" !important;
}.stars a {font-family: 'fl-icons'!important;}*/


/* --- BẮT ĐẦU FORM GET IN TOUCH --- */

/* 1. Khung bao quanh (Nền màu nâu xám) */
.custom-get-in-touch-form {
    background-color: #847d72; /* Màu nâu đất sang trọng giống mẫu */
    padding: 40px;
    color: #ffffff;
    font-family: "Times New Roman", serif; /* Đồng bộ font web của bạn */
}

/* 2. Tiêu đề GET IN TOUCH */
.git-title {
    color: #ffffff !important;
    text-transform: uppercase;
    font-size: 24px;
    margin-bottom: 15px;
    letter-spacing: 1px;
    font-weight: bold;
}

/* 3. Dấu gạch ngang dưới tiêu đề */
.git-separator {
    width: 60px;
    height: 4px;
    background-color: #dcdcdc; /* Màu xám nhạt */
    margin-bottom: 30px;
}

/* 4. Các ô nhập liệu (Input) */
.custom-get-in-touch-form input[type="text"],
.custom-get-in-touch-form input[type="email"],
.custom-get-in-touch-form textarea {
    background-color: #ffffff !important;
    border: none !important;
    border-radius: 0 !important; /* Vuông góc */
    color: #333;
    margin-bottom: 15px;
    height: 50px; /* Chiều cao ô nhập */
    padding-left: 15px;
    font-size: 16px;
}

/* Chỉnh riêng chiều cao cho ô tin nhắn */
.custom-get-in-touch-form textarea {
    height: 120px !important;
    padding-top: 15px;
}

/* 5. Nút Gửi (Send message) - Dạng trong suốt */
.custom-get-in-touch-form input[type="submit"] {
    background-color: transparent !important;
    border: 2px solid #ffffff !important;
    color: #ffffff !important;
    font-weight: bold;
    text-transform: none !important; /* Chữ thường, không viết hoa hết */
    font-size: 16px;
    padding: 10px 35px;
    margin-top: 10px;
    border-radius: 0 !important;
    width: auto;
}

/* Hiệu ứng khi di chuột vào nút */
.custom-get-in-touch-form input[type="submit"]:hover {
    background-color: #ffffff !important;
    color: #847d72 !important; /* Chữ đổi màu nâu */
    cursor: pointer;
}

/* 6. Phần thông tin liên hệ bên dưới */
.git-contact-info {
    margin-top: 30px;
    font-size: 15px;
    border-top: 1px solid rgba(255,255,255,0.2); /* Đường kẻ mờ ngăn cách */
    padding-top: 20px;
}

.git-info-row {
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.git-icon {
    font-size: 18px; /* Kích thước icon */
}

/* --- KẾT THÚC --- */


/* --- BẮT ĐẦU CODE ICON LY RƯỢU --- */

/* 1. Ẩn icon trái tim cũ đi */
.btn-wine i svg {opacity: 0 !important;}

/* 2. Biến khung icon cũ thành hình ly rượu */
.btn-wine i {/* Đặt màu nền ăn theo màu chữ (currentColor) */background-color: currentColor !important; 
    /* Dùng kỹ thuật mặt nạ (Mask) để cắt hình ly rượu */
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M19 3H5c-1.1 0-2 .9-2 2v5c0 4.16 3.18 7.57 7.25 7.95V21H7v2h10v-2h-3.25v-3.05C17.82 17.57 21 14.16 21 9V5c0-1.1-.9-2-2-2zm0 6c0 3.31-2.69 6-6 6s-6-2.69-6-6V5h12v4z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M19 3H5c-1.1 0-2 .9-2 2v5c0 4.16 3.18 7.57 7.25 7.95V21H7v2h10v-2h-3.25v-3.05C17.82 17.57 21 14.16 21 9V5c0-1.1-.9-2-2-2zm0 6c0 3.31-2.69 6-6 6s-6-2.69-6-6V5h12v4z'/%3E%3C/svg%3E");
    
/* Căn chỉnh vị trí */
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: contain;
    mask-size: contain;
}
/* --- KẾT THÚC CODE --- */


/* Căn giữa ảnh và thông tin sản phẩm trên Desktop */
@media (min-width: 850px) {
   .product-container .product-main > .row {
      display: flex !important; /* Kích hoạt chế độ Flex */
      align-items: center !important; /* Căn giữa trục dọc */
   }
   
   /* (Tùy chọn) Nếu text bên phải vẫn hơi lệch do có khoảng đệm thừa, bạn thêm dòng này: */
   .product-info {
       padding-top: 0 !important;
       padding-bottom: 0 !important;
   }
}






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


}