/* ==================================================
   GIAO DIỆN FINAL: LƯỚI 6 Ô (5 SP + 1 BUTTON GIỮA)
   ================================================== */

/* 1. GRID 3 CỘT (PC) */
body .osty-restore-grid {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 30px !important;
    width: 100% !important;
}

/* 2. CARD SẢN PHẨM */
body .osty-card {
    background: #fff;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0,0,0,0.06);
    display: flex;
    flex-direction: column;
    transition: transform 0.3s;
    width: 100% !important;
}
body .osty-card:hover { transform: translateY(-5px); }

/* 3. ẢNH SP */
body .osty-thumb img { width: 100% !important; height: 350px !important; object-fit: cover !important; display: block !important; }

/* 4. BODY SP */
body .osty-body { padding: 15px; display: flex; flex-direction: column; flex-grow: 1; }
body .osty-title { margin: 0 0 5px !important; font-size: 16px !important; font-weight: 700; }
body .osty-title a { color: #000; text-decoration: none; }
body .osty-cats { font-size: 13px !important; color: #888 !important; margin-bottom: 15px !important; line-height: 1.4; }
body .osty-cats a { color: #888 !important; text-decoration: none !important; }

/* 5. FOOTER SP */
body .osty-item-footer { margin-top: auto; display: flex; justify_content: space-between; align-items: center; border-top: 1px solid #f0f0f0; padding-top: 15px; width: 100%; }
body .osty-price { font-weight: 700; color: #000; font-size: 15px; }

/* 6. NÚT VÀNG (HOVER SANG HỒNG) */
body .osty-btn-wrapper { margin-left: auto !important; }
body .osty-btn-wrapper .button, body .osty-btn-wrapper a.button {
    background-color: #FDCB6E !important; color: #000 !important; padding: 8px 20px !important;
    border-radius: 50px !important; font-size: 13px !important; font-weight: 700 !important;
    border: none !important; display: inline-flex; align-items: center; justify-content: center;
    height: 36px !important; margin: 0 !important; text-transform: none !important;
}
body .osty-btn-wrapper .button:hover { 
    background-color: #F4468B !important; /* Đổi hover vàng sang HỒNG */
    color: #fff !important;
    transform: translateY(-2px); 
}
body .osty-btn-wrapper .yith-wcqv-button, body .osty-btn-wrapper .tinv-wishlist { display: none !important; }

/* 7. TABS */
body .osty-restore-tabs { display: flex; justify_content: center; gap: 10px; margin-bottom: 30px; flex-wrap: wrap; }
/* Tab bị trùng lặp ở dưới, mình đã gộp xuống phần STYLE TAB bên dưới */
body .osty-tab[data-filter="cat-uncategorized"], body .osty-tab[data-filter="cat-chua-phan-loai"] { display: none !important; }

/* ==================================================
   [MỚI] STYLE CHO Ô BUTTON GIỮA (THAY CARD)
   ================================================== */
body .osty-see-more-card {
    background-color: #f5f5f5 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 100%;
    box-shadow: none !important;
    border: 1px solid #eee;
}

/* Style cho cái nút "Xem thêm" */
body .osty-see-more-btn {
    background-color: #F4468B !important; /* MÀU HỒNG */
    color: white !important;
    font-weight: 700 !important;
    font-size: 15px !important;
    padding: 12px 25px !important;
    border-radius: 50px !important;
    text-decoration: none !important;
    transition: all 0.3s ease !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 5px !important;
    box-shadow: 0 4px 10px rgba(244, 70, 139, 0.4) !important; /* Bóng hồng */
}

/* Hiệu ứng khi di chuột vào nút */
body .osty-see-more-btn:hover {
    background-color: #d0326e !important; /* Hồng đậm hơn */
    color: #fff !important;
    transform: scale(1.05);
}

/* ==================================================
   MOBILE (2 CỘT)
   ================================================== */
@media (max-width: 768px) {
    body .osty-restore-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 15px !important; }
    body .osty-thumb img { height: 220px !important; }
    body .osty-body { padding: 10px !important; }
    body .osty-btn-wrapper .button, body .osty-btn-wrapper a.button { padding: 5px 12px !important; font-size: 12px !important; height: 32px !important; }
    body .osty-title { font-size: 14px !important; }
    
    /* Mobile: Đảm bảo ô xem thêm có chiều cao tối thiểu */
    body .osty-see-more-card {
        min-height: 250px !important;
        background-color: #f5f5f5 !important;
    }
}
.ms-sp--title{
    display:none;
}
.main-header__logo{
/* 2. Tạo hình dáng "Viên thuốc" sang trọng */
    padding-right:10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 5px 5px; 
    border-radius: 50px; 
    
    /* 3. Hiệu ứng nền & Kính mờ */
    background: rgba(255, 255, 255, 1) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;

    /* 4. Đổ bóng Apple Style (Sâu và Nổi) */
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 
                0 8px 10px -6px rgba(0, 0, 0, 0.05);

    /* 5. Reset các lề thừa cũ gây lệch */
    margin: 0 !important; 
    border: 1px solid rgba(255, 255, 255, 0.8);
    white-space: nowrap;
}

/* === 1. STYLE TAB (ĐÃ SỬA SANG MÀU HỒNG) === */

/* Container chứa tabs */
.osty-restore-tabs {
    display: flex;
    flex-wrap: nowrap !important;
    overflow-x: auto;
    gap: 12px;
    padding: 10px 5px 20px 5px !important;
    scrollbar-width: none;
}
.osty-restore-tabs::-webkit-scrollbar {
    display: none;
}

/* Style từng Tab */
.osty-tab {
    background-color: #FFF0F5 !important; /* Nền HỒNG NHẠT (Lavender Blush) */
    color: #F4468B !important; /* Chữ HỒNG ĐẬM */
    padding: 10px 24px !important;
    border-radius: 50px !important;
    font-weight: 600 !important;
    font-size: 14px;
    white-space: nowrap;
    border: 1px solid transparent !important;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* Hiệu ứng Hover vào Tab thường */
.osty-tab:hover {
    color: #d0326e !important; /* Hồng đậm hơn */
    box-shadow: 0 8px 16px rgba(244, 70, 139, 0.25) !important; /* Bóng hồng */
    transform: translateY(-3px);
    border-color: #FFF0F5 !important;
}

/* Tab đang chọn (Active) */
.osty-tab.active {
    background: linear-gradient(135deg, #F4468B 0%, #d0326e 100%) !important; /* Gradient Hồng */
    color: #ffffff !important;
    box-shadow: 0 4px 12px rgba(244, 70, 139, 0.4) !important;
    transform: translateY(0);
}

/* === 2. STYLE NÚT "XEM TẤT CẢ" === */

/* Biến nút này thành khối màu HỒNG nổi bật */
.osty-see-more-btn {
    background-color: #F4468B !important;
    color: #ffffff !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 10px rgba(244, 70, 139, 0.2) !important;
    text-align: center;
}

.osty-see-more-btn span, 
.osty-see-more-btn div,
.osty-see-more-btn a {
    color: #ffffff !important;
    font-weight: 700 !important;
    font-size: 15px !important;
    text-decoration: none !important;
}

.osty-see-more-btn svg,
.osty-see-more-btn svg path {
    fill: #ffffff !important;
    stroke: none !important;
    transition: transform 0.3s ease;
}

/* Hiệu ứng Hover cho nút Xem thêm */
.osty-see-more-btn:hover{
    background-color: #d0326e !important; /* Hồng đậm */
    transform: translateY(-2px);
    box-shadow: 0 10px 20px rgba(244, 70, 139, 0.35) !important;
}

.osty-see-more-btn:hover svg {
    transform: scale(1.2);
}

.move .main-header--widgets::after{
    background-color: white;
}
.ms-hw-inner svg path {
    stroke: #F4468B !important; /* Icon Header màu HỒNG */
    stroke-width: 3;
}

/* =================================================
   KHẮC PHỤC LỖI MẤT NÚT VÀ CẤN VIỀN
   ================================================= */

#ms-header .main-header--widgets,
.main-header--widgets,
.move .main-header--widgets {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    height: auto !important;
    min-height: 45px !important;
    opacity: 1 !important;
    visibility: visible !important;
    position: relative !important;
    z-index: 999 !important;
    background: transparent !important;
    box-shadow: none !important;
    border: none !important;
}

.main-header--widgets::after,
.main-header--widgets::before,
.ms-menu-wrapper::after,
.ms-menu-wrapper::before {
    content: none !important;
    display: none !important;
    width: 0 !important;
    height: 0 !important;
    opacity: 0 !important;
}

.ms-menu-wrapper,
.osty-menu-btn,
.menu-toggle {
    display: flex !important;
    opacity: 1 !important;
    visibility: visible !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}
.header__search-icon.ms-h_w{
    background-color: white !important;
}

/* 1. SỬA LỖI ICON BỊ LỆCH */
#ms-header .header__search-icon svg,
#ms-header .ms-hw-inner svg {
    position: relative !important; 
    top: auto !important;
    left: auto !important;
    transform: none !important;
    margin: 0 !important;
    
    stroke: #F4468B !important; /* Màu HỒNG */
    width: 20px !important;
    height: 20px !important;
}

/* 2. CĂN GIỮA KHUNG TRÒN BAO NGOÀI */
#ms-header .header__search-icon,
#ms-header .ms-hw-inner > div {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 45px !important;
    height: 45px !important;
    padding: 0 !important;
    background: #ffffff !important;
    border-radius: 50% !important;
}

/* =========================================================
   1. ÉP MÀU TRẮNG CHO TOÀN BỘ NỘI DUNG NÚT .f-btn-r
   ========================================================= */
.f-btn-r,
.f-btn-r:hover,
.f-btn-r:focus,
.f-btn-r:active,
.f-btn-r:visited {
    color: #ffffff !important;
}

.f-btn-r * {
    color: #ffffff !important;
}

.f-btn-r svg,
.f-btn-r svg path,
.f-btn-r svg rect,
.f-btn-r svg circle {
    fill: currentColor !important;
    color: #ffffff !important;
}

/* =========================================================
   2. TÙY CHỈNH DANH MỤC & GIỎ HÀNG
   ========================================================= */
.ms-woocommerce-product-category .ms-product-media {
    display: none !important;
}

.ms-woocommerce-product-category .ms-product-content {
    text-align: center !important;
    padding: 10px 0 !important;
}

.wc-block-components-button__text {
    color: white;
}

/* Tăng độ đậm cho icon Giỏ hàng */
.main-header__cart svg {
    stroke: currentColor !important;
    stroke-width: 5px !important;
    stroke-linejoin: round !important;
    stroke-linecap: round !important;
    fill: none !important;
}

.main-header__cart svg path,
.main-header__cart svg circle,
.main-header__cart svg g {
    stroke-width: inherit !important;
    stroke: inherit !important;
    fill: inherit !important;
}

/* =========================================================
   3. ICON TÌM KIẾM & GIỎ HÀNG (HEADER)
   ========================================================= */
.header__search-icon.ms-h_w, .main-header__cart {
    width: 45px !important;
    height: 45px !important;
    min-width: 45px !important;
    flex-shrink: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 50% !important;
    transition: all 0.3s ease !important;
    background-color: #ffffff !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15) !important;
    color: #333 !important;
}

/* Hiệu ứng Hover: Đổi sang màu HỒNG */
.header__search-icon:hover, .main-header__cart:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2) !important;
    color: #F4468B !important; 
}

button[data-filter="cat-tat-ca"] {
    display: none !important;
}
.reviews_tab {
    display: none !important;
}

/* =========================================================
   4. TRANG GIỎ HÀNG (CART PAGE)
   ========================================================= */
.woocommerce-cart .cart-collaterals .cart_totals {
    border: 1px solid #E5E5EA !important;
    border-radius: 12px !important;
    background-color: #FFFFFF !important;
    box-shadow: none !important;
    padding: 24px !important;
    width: 100% !important;
}

.woocommerce-cart .cart-collaterals .cart_totals h2 {
    font-size: 18px !important;
    font-weight: 700 !important;
    color: #1D1D1F !important;
    border-bottom: 1px solid #E5E5EA !important;
    padding-bottom: 15px !important;
    margin-bottom: 15px !important;
    margin-top: 0 !important;
}

.woocommerce-cart .cart-collaterals .shop_table {
    border: none !important;
    margin: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

.woocommerce-cart .cart-collaterals .shop_table th,
.woocommerce-cart .cart-collaterals .shop_table td {
    padding: 12px 0 !important;
    border-top: 1px solid #E5E5EA !important;
    background: transparent !important;
}

.woocommerce-cart .coupon .input-text {
    border: 1px solid #E5E5EA !important;
    border-radius: 8px !important;
    height: 40px !important;
    padding: 0 15px !important;
    box-shadow: none !important;
    width: 200px !important;
}

.woocommerce-cart button[name="apply_coupon"],
.woocommerce-cart button[name="update_cart"] {
    background-color: #F5F5F7 !important;
    color: #1D1D1F !important;
    border: 1px solid #D1D1D6 !important;
    border-radius: 8px !important;
    height: 40px !important;
    font-weight: 600 !important;
    padding: 0 20px !important;
    transition: all 0.2s !important;
}

.woocommerce-cart button[name="apply_coupon"]:hover,
.woocommerce-cart button[name="update_cart"]:hover {
    background-color: #E5E5EA !important;
    border-color: #C6C6C8 !important;
}

/* NÚT THANH TOÁN (CHECKOUT) - MÀU HỒNG */
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button {
    background-color: #F4468B !important; 
    color: #FFFFFF !important;
    border-radius: 12px !important;
    font-weight: 600 !important;
    font-size: 16px !important;
    padding: 15px !important;
    margin-top: 20px !important;
    box-shadow: 0 4px 12px rgba(244, 70, 139, 0.3) !important;
}

.woocommerce-cart .wc-proceed-to-checkout a.checkout-button:hover {
    background-color: #d0326e !important; 
    transform: translateY(-1px);
}

/* =========================================================
   5. BRANDING GLOBAL COLORS (HỒNG #F4468B)
   ========================================================= */
:root {
    --ast-global-color-0: #F4468B !important;
    --ast-global-color-1: #F4468B !important;
    --ast-global-color-2: #F4468B !important;
    --e-global-color-primary: #F4468B !important;
    --e-global-color-secondary: #F4468B !important;
    --e-global-color-accent: #F4468B !important;
    --d-primary: #F4468B !important;
}

button, 
input[type="submit"], 
.elementor-button, 
.wp-block-button__link,
.ast-button {
    background-color: #F4468B !important;
    border-color: #F4468B !important;
    color: #ffffff !important;
}

a {
    color: #F4468B;
}

::selection {
    background-color: #F4468B !important;
    color: #ffffff !important;
}