/*
    THEME RAPHA v2 (báo giá giao diện 22/10/2026 - hạng mục 1)
    Bám theo ảnh mẫu: nền kem có cành lá mờ, header trắng, thẻ sản phẩm trắng bo tròn,
    giá xanh lá đậm, nút "Mua ngay" vàng đồng, footer kem có cành lá.
    Nạp SAU CÙNG trong layout nên chỉ ghi đè, không sửa các file CSS cũ.
    Bỏ dòng <link> nạp file này là quay về giao diện cũ.
*/
:root {
    --rp-green: #1B5E3F;
    --rp-green-dark: #134630;
    --rp-green-soft: #2E7A55;
    --rp-cream: #F6F4EC;
    --rp-cream-2: #EFECE1;
    --rp-paper: #FFFFFF;
    --rp-gold: #B88F56;
    --rp-gold-dark: #9C7643;
    --rp-gold-soft: #E9DCC6;
    --rp-sage: #D6E5D0;
    --rp-sage-text: #2F6B4B;
    --rp-gray: #6B7280;
    --rp-line: #E7E3D6;
    --rp-text: #1E2A23;
    --rp-radius: 14px;
    --rp-radius-lg: 20px;
    --rp-shadow: 0 2px 6px rgba(30, 42, 35, .04), 0 8px 24px rgba(30, 42, 35, .06);
    --rp-shadow-hover: 0 4px 10px rgba(30, 42, 35, .06), 0 16px 36px rgba(30, 42, 35, .10);
    --rp-font: 'Be Vietnam Pro', 'Roboto', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --rp-font-title: 'Playfair Display', Georgia, 'Times New Roman', serif;
    --rp-leaf: url(../images/theme/leaf-branch.svg);
    --rp-leaf-soft: url(../images/theme/leaf-soft.svg);
}

/* =========================================================
   1. NỀN, CHỮ
   ========================================================= */
html body,
body,
.wrapper {
    font-family: var(--rp-font);
    color: var(--rp-text);
    background-color: var(--rp-cream);
    -webkit-font-smoothing: antialiased;
}
body {
    /* Cành lá mờ ở hai mép trang, đứng yên khi cuộn như ảnh mẫu */
    background-image: var(--rp-leaf-soft), var(--rp-leaf-soft);
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: 380px auto, 420px auto;
    background-position: left -120px top 140px, right -140px bottom -60px;
}
.wrapper { background-color: transparent; }
main, .service-section, .bannner-section, .block-news,
.deal-of-day-section, .deal-of-day-section.flash-sale { background: transparent !important; }
h1, h2, h3, h4, h5, h6, p, a, span, li, input, button, select, textarea {
    font-family: var(--rp-font);
}
a { transition: color .2s ease; }
a:hover { color: var(--rp-green); }

/* =========================================================
   2. HEADER
   ========================================================= */
.site-header,
.menu-top-area { background: var(--rp-green) !important; }
.menu-top-area { font-size: 13px; }
.menu-top-area,
.menu-top-area a,
.menu-top-area span,
.menu-top-area i { color: rgba(255, 255, 255, .92) !important; }

.site-header .topbar {
    background-color: var(--rp-paper) !important;
    background-image: var(--rp-leaf-soft), var(--rp-leaf-soft);
    background-repeat: no-repeat;
    background-size: 210px auto, 210px auto;
    background-position: left -60px top -50px, right -70px bottom -90px;
    border-bottom: 1px solid var(--rp-line);
}
.site-header .topbar img[src*="logo"] { max-height: 76px; width: auto; }

/* Ô tìm kiếm dạng viên thuốc */
#header_search_form {
    border: 1.5px solid #D9D5C7 !important;
    border-radius: 999px !important;
    overflow: hidden;
    background: #fff;
    transition: border-color .2s ease, box-shadow .2s ease;
}
#header_search_form:focus-within {
    border-color: var(--rp-green) !important;
    box-shadow: 0 0 0 4px rgba(27, 94, 63, .08);
}
#header_search_form input,
#header_search_form .form-control { border: 0 !important; box-shadow: none !important; background: transparent; }
#header_search_form button,
#header_search_form .btn { background: transparent !important; color: var(--rp-green) !important; }

/* Điện thoại / Đăng nhập / Giỏ hàng */
.site-header .toolbar .toolbar-item > a > div i,
.site-header .topbar .hotline-text a,
.site-header .topbar .text-label,
.site-header .toolbar .toolbar-item > a > div > .text-label {
    color: var(--rp-green) !important;
}
.site-header .toolbar .toolbar-item > a > div > .text-label,
.site-header .topbar .hotline-text a { font-weight: 500; font-size: 14px; }
.site-header .count,
.site-header .cart-count,
a.btn-carts {
    background: var(--rp-gold) !important;
    color: #fff !important;
}

/* Thanh menu */
.site-header .navbar {
    background: rgba(239, 236, 225, .92) !important;
    border-bottom: 1px solid var(--rp-line);
}
.site-header .site-menu > ul > li a {
    color: var(--rp-text) !important;
    font-weight: 500;
    font-size: 14.5px;
    letter-spacing: .3px;
    position: relative;
}
.site-header .site-menu > ul > li > a::after {
    content: "";
    position: absolute;
    left: 50%; right: 50%; bottom: 6px;
    height: 2px;
    background: var(--rp-green);
    border-radius: 2px;
    transition: left .25s ease, right .25s ease;
}
.site-header .site-menu > ul > li:hover > a,
.site-header .site-menu > ul > li.active > a { color: var(--rp-green) !important; }
.site-header .site-menu > ul > li:hover > a::after,
.site-header .site-menu > ul > li.active > a::after { left: 18%; right: 18%; }

/* =========================================================
   3. BANNER + Ô ƯU ĐIỂM
   ========================================================= */
.slideshow .slideshow__img,
.slideshow .slideshow__img img,
.slideshow-list .slideshow__img img,
.bannner-section img {
    border-radius: var(--rp-radius-lg) !important;
    overflow: hidden;
}
.slideshow { padding-top: 22px; }

.service-section { padding: 22px 0 8px !important; }
.service-section .single-service {
    background: var(--rp-paper) !important;
    border: 1px solid var(--rp-line) !important;
    border-radius: var(--rp-radius) !important;
    box-shadow: var(--rp-shadow) !important;
    padding: 16px 18px !important;
    transition: transform .2s ease, box-shadow .2s ease;
}
.service-section .single-service:hover { transform: translateY(-2px); box-shadow: var(--rp-shadow-hover) !important; }
/* Vòng tròn sage phía sau icon (vẽ riêng vì bộ lọc màu bên dưới sẽ tô cả nền của ảnh) */
.service-section .single-service { position: relative; }
.service-section .single-service::before {
    content: "";
    position: absolute;
    left: 18px; top: 50%;
    width: 62px; height: 62px;
    margin-top: -31px;
    border-radius: 50%;
    background: var(--rp-sage);
}
.service-section .single-service img {
    position: relative;
    z-index: 1;
    width: 42px !important; height: 42px !important;
    margin: 0 10px !important;
    padding: 0 !important;
    background: none !important;
    object-fit: contain;
    /* Icon gốc màu đỏ: lọc về xanh lá thương hiệu */
    filter: brightness(0) saturate(100%) invert(27%) sepia(37%) saturate(780%) hue-rotate(100deg) brightness(92%) contrast(92%);
}
.service-section .single-service h3,
.service-section .single-service h4,
.service-section .single-service .title {
    color: var(--rp-green) !important;
    font-weight: 700;
    font-size: 14px;
    letter-spacing: .2px;
}
.service-section .single-service p { color: var(--rp-gray) !important; font-size: 13px; }

/* =========================================================
   4. TIÊU ĐỀ KHỐI (thay thanh xanh + ruy-băng vàng cũ)
   ========================================================= */
.deal-of-day-section .group-title,
.section-title,
.box-hedding-title-block .section-title {
    background: none !important;
    border: 0 !important;
    box-shadow: none !important;
    justify-content: center;
    text-align: center;
    padding: 6px 0 18px !important;
    position: relative;
    margin-bottom: 8px;
}
.deal-of-day-section .group-title p,
.deal-of-day-section .group-title .tt-up,
.section-title h2,
.section-title .h3 {
    font-family: var(--rp-font-title) !important;
    color: var(--rp-green) !important;
    font-size: 30px !important;
    font-weight: 700 !important;
    text-transform: none !important;
    letter-spacing: .2px;
    background: none !important;
    margin: 0 !important;
    padding: 0 !important;
    -webkit-text-fill-color: currentColor;
    text-shadow: none !important;
    line-height: 1.25;
}
.section-title h2::before { display: none !important; }
/* Gạch chân vàng đồng + chấm lá dưới tiêu đề */
.deal-of-day-section .group-title::after,
.section-title::after {
    content: "";
    position: absolute;
    left: 50%; bottom: 4px;
    width: 64px; height: 3px;
    margin-left: -32px;
    border-radius: 3px;
    background: linear-gradient(90deg, transparent, var(--rp-gold) 20%, var(--rp-gold) 80%, transparent);
}

/* Khối "Sản phẩm nổi bật": bỏ mảng xanh đậm, để nền sáng */
.box_flash {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    padding: 28px 0 10px !important;
}

/* =========================================================
   5. THẺ SẢN PHẨM (theo ảnh mẫu)
   ========================================================= */
.product-card {
    background: var(--rp-paper) !important;
    border: 1px solid var(--rp-line) !important;
    border-radius: var(--rp-radius-lg) !important;
    box-shadow: var(--rp-shadow) !important;
    overflow: hidden;
    padding: 12px 12px 14px !important;
    transition: box-shadow .25s ease, transform .25s ease;
}
.product-card:hover { box-shadow: var(--rp-shadow-hover) !important; transform: translateY(-3px); }
.product-card .product-thumb {
    border-radius: var(--rp-radius) !important;
    overflow: hidden;
    background: var(--rp-cream);
}
.product-card .product-thumb img { border-radius: var(--rp-radius) !important; }
.product-card .product-card-body { padding: 14px 4px 4px !important; }
.product-card .product-title,
.product-card .product-title a {
    color: var(--rp-text) !important;
    font-weight: 600 !important;
    font-size: 15px !important;
    line-height: 1.4;
    text-align: center;
}
.product-card .product-title a:hover { color: var(--rp-green) !important; }
.product-card .product-category,
.product-card .product-category a { color: var(--rp-gray) !important; font-size: 12px; }

/* Nút nhanh trên ảnh (link / xem ảnh / thêm giỏ) */
.product-card .product-button-group .product-button {
    background: rgba(255, 255, 255, .95) !important;
    color: var(--rp-green) !important;
    border-radius: 50% !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, .12);
}
.product-card .product-button-group .product-button:hover { background: var(--rp-green) !important; color: #fff !important; }
.product-card .product-button-group .product-button i { color: inherit !important; }

/* Nhãn HOT: viên thuốc vàng đồng như ảnh mẫu */
.hot-badge {
    background: rgba(156, 118, 67, .92) !important;
    border-radius: 999px !important;
    padding: 4px 12px !important;
    font-size: 12px !important;
    letter-spacing: .6px;
    box-shadow: 0 3px 10px rgba(0, 0, 0, .18) !important;
    top: 10px !important; left: 10px !important;
}

/* Khối giá: số to xanh đậm, bỏ khung viền */
.product-card .product-price { margin: 6px 0 0 !important; }
.pd-wrap.pd-compact .pd-box {
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    padding: 2px 0 0 !important;
}
.pd-wrap.pd-plain .pd-single,
.pd-wrap .pd-final {
    color: var(--rp-green-dark) !important;
    font-weight: 700 !important;
    font-size: 24px !important;
    letter-spacing: -.2px;
}
.pd-wrap .pd-vat-only,
.pd-wrap .pd-vat {
    color: var(--rp-gray) !important;
    font-size: 12px !important;
}
.pd-wrap .pd-badge,
.pd-badge--inline,
.pd-badge--community {
    background: var(--rp-sage) !important;
    color: var(--rp-sage-text) !important;
    border: 0 !important;
    border-radius: 999px !important;
    font-weight: 600;
}

/* =========================================================
   6. NÚT BẤM
   ========================================================= */
.btn, button, input[type="submit"],
.featured-buy-now, a.buy-now button, .btn-orange, .btn-contacts,
.btn-web--primary, .primary-btn, .layout-product .button_actions .btn,
.timhieuthem a, a.more-gioithieu {
    border-radius: 999px !important;
    transition: background-color .2s ease, box-shadow .2s ease, transform .1s ease, color .2s ease;
}
/* Nút chính: vàng đồng, đổi sang xanh khi trỏ */
.featured-buy-now, a.buy-now button, .btn-orange, .btn-contacts,
.btn-web--primary, .primary-btn, .layout-product .button_actions .btn {
    background: var(--rp-gold) !important;
    border: 1px solid var(--rp-gold) !important;
    color: #fff !important;
    font-weight: 600 !important;
    box-shadow: 0 6px 16px rgba(184, 143, 86, .28);
}
.featured-buy-now:hover, a.buy-now button:hover, .btn-orange:hover, .btn-contacts:hover,
.btn-web--primary:hover, .primary-btn:hover, .layout-product .button_actions .btn:hover {
    background: var(--rp-green) !important;
    border-color: var(--rp-green) !important;
    box-shadow: 0 6px 16px rgba(27, 94, 63, .25);
}
.featured-buy-now:active, .btn-web--primary:active { transform: translateY(1px); }

/* Nút "Mua ngay" trong thẻ sản phẩm: icon giỏ + chữ + mũi tên */
.featured-buy-now {
    display: flex !important;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin: 14px 4px 0 !important;
    padding: 12px 18px !important;
    font-size: 15px !important;
    letter-spacing: .2px;
    text-transform: none !important;
}
.featured-buy-now .fa-chevron-right { font-size: 11px; opacity: .85; transition: transform .2s ease; }
.featured-buy-now:hover .fa-chevron-right { transform: translateX(3px); }

/* Nút viền phụ (Xem thêm, Tìm hiểu thêm) */
.timhieuthem a, a.more-gioithieu, .block-news .btn, .block-news a.btn-more {
    background: transparent !important;
    border: 1.5px solid var(--rp-green) !important;
    color: var(--rp-green) !important;
    box-shadow: none !important;
}
.timhieuthem a:hover, a.more-gioithieu:hover { background: var(--rp-green) !important; color: #fff !important; }

/* =========================================================
   7. TIN TỨC
   ========================================================= */
.block-news { padding: 24px 0 36px; }
.block-news .slick-blog-news { background: transparent !important; }
.block-news .item-blog-news .item {
    background: var(--rp-paper) !important;
    border: 1px solid var(--rp-line);
    border-radius: var(--rp-radius-lg) !important;
    box-shadow: var(--rp-shadow);
    overflow: hidden;
    transition: box-shadow .25s ease, transform .25s ease;
}
.block-news .item-blog-news .item:hover { box-shadow: var(--rp-shadow-hover); transform: translateY(-3px); }
.block-news .item-blog-news .image-post img { border-radius: 0 !important; }
.block-news .item-blog-news h3,
.block-news .item-blog-news h3 a { color: var(--rp-text) !important; font-weight: 600 !important; }
.block-news .item-blog-news h3 a:hover { color: var(--rp-green) !important; }

/* =========================================================
   8. FOOTER
   ========================================================= */
.site-footer {
    background-color: var(--rp-cream-2) !important;
    background-image: var(--rp-leaf-soft), var(--rp-leaf-soft);
    background-repeat: no-repeat;
    background-size: 300px auto, 260px auto;
    background-position: left -80px bottom -90px, right -60px top -60px;
    border-top: 1px solid var(--rp-line);
}
.site-footer .widget,
.site-footer a,
.site-footer p,
.site-footer span { color: #3B4740 !important; }
.site-footer .widget-title {
    color: var(--rp-green) !important;
    font-weight: 700 !important;
    letter-spacing: .4px;
    border-bottom: 1px solid var(--rp-gold-soft) !important;
    padding-bottom: 10px;
}
.site-footer a:hover { color: var(--rp-green) !important; }
.site-footer input[type="email"],
.site-footer input[type="text"] {
    border-radius: 999px 0 0 999px !important;
    border: 1px solid #D9D5C7 !important;
    background: #fff !important;
    padding-left: 16px !important;
}
.site-footer .push-btn,
.site-footer form button {
    background: var(--rp-gold) !important;
    border-color: var(--rp-gold) !important;
    color: #fff !important;
    border-radius: 0 999px 999px 0 !important;
    font-weight: 600;
}
.site-footer .push-btn:hover,
.site-footer form button:hover { background: var(--rp-green) !important; border-color: var(--rp-green) !important; }
.site-footer .footer-social-links a {
    background: var(--rp-green) !important;
    border-radius: 50% !important;
}
.site-footer .footer-social-links a:hover { background: var(--rp-gold) !important; }
.site-footer .footer-social-links a i { color: #fff !important; }

/* =========================================================
   9. MÀN HÌNH HẸP
   ========================================================= */
@media (max-width: 991px) {
    body { background-size: 220px auto, 240px auto; }
    .deal-of-day-section .group-title p,
    .deal-of-day-section .group-title .tt-up,
    .section-title h2, .section-title .h3 { font-size: 24px !important; }
}
@media (max-width: 575px) {
    .site-header .topbar { background-size: 120px auto, 120px auto; }
    .pd-wrap.pd-plain .pd-single, .pd-wrap .pd-final { font-size: 20px !important; }
    .featured-buy-now { padding: 10px 14px !important; font-size: 14px !important; }
}