/*
Theme Name: Hungfarm
Theme URI: http://example.com/hungfarm
Author: AI Assistant
Author URI: http://example.com
Description: Giao diện chuẩn SEO cho web bĂ¡n hĂ ng Hungfarm, tĂch hợp WooCommerce vĂ Rank Math SEO.
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: hungfarm
Tags: e-commerce, seo-friendly, custom-background
*/
:root {
--primary-color: #105029;
/* Vibrant green */
--accent-color: #105029;
/* Rich darker green */
--danger-color: #e54c78;
/* Price color */
--text-color: #282828;
--border-color: #ececec;
--bg-light: #f9f9f9;
--container-max-width: 1230px;
--container-padding: 30px;
}
/* ═══ Local Fonts: Helvetica Neue ═══ */
@font-face {
font-family: 'HelveticaNeue';
src: url('font/helvetica-neue-regular.ttf') format('truetype');
font-weight: 400;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'HelveticaNeue';
src: url('font/helvetica-neue-italic.ttf') format('truetype');
font-weight: 400;
font-style: italic;
font-display: swap;
}
@font-face {
font-family: 'HelveticaNeue';
src: url('font/helvetica-neue-medium.ttf') format('truetype');
font-weight: 500;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'HelveticaNeue';
src: url('font/helvetica-neue-bold.ttf') format('truetype');
font-weight: 500;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'HelveticaNeue';
src: url('font/helvetica-neue-bold-italic.ttf') format('truetype');
font-weight: 500;
font-style: italic;
font-display: swap;
}
@font-face {
font-family: 'HelveticaNeue';
src: url('font/helvetica-neue-light.ttf') format('truetype');
font-weight: 300;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'HelveticaNeue';
src: url('font/helvetica-neue-light-italic.ttf') format('truetype');
font-weight: 300;
font-style: italic;
font-display: swap;
}
@font-face {
font-family: 'HelveticaNeue';
src: url('font/helvetica-neue-ultra-light.ttf') format('truetype');
font-weight: 200;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'HelveticaNeue';
src: url('font/helvetica-neue-ultra-light-italic.ttf') format('truetype');
font-weight: 200;
font-style: italic;
font-display: swap;
}
@font-face {
font-family: 'HelveticaNeue';
src: url('font/helvetica-neue-condensed-bold.ttf') format('truetype');
font-weight: 500;
font-stretch: condensed;
font-display: swap;
}
@font-face {
font-family: 'HelveticaNeue';
src: url('font/helvetica-neue-condensed-black.ttf') format('truetype');
font-weight: 900;
font-stretch: condensed;
font-display: swap;
}
body {
font-family: 'Roboto', 'HelveticaNeue', "Helvetica Neue", Helvetica, Arial, sans-serif;
color: var(--text-color);
line-height: 1.4;
margin: 0;
padding: 0;
background-color: #f9f9f9;
-webkit-font-smoothing: antialiased;
font-size: 16px;
}
h1,
h2,
h3,
h4,
h5,
h6 {
font-family: 'Roboto', sans-serif;
font-weight: 700;
color: #105029;
}
p {
text-align: justify;
}
.background_nen {
background-color: #fff;
display: flex;
}
/* Global Container (Chuẩn SEO & Layout) */
.container {
max-width: var(--container-max-width);
margin: 0 auto;
padding: 0 var(--container-padding);
width: 100%;
box-sizing: border-box;
background: transparent;
}
/* Utility Classes */
.d-flex {
display: flex;
}
.align-items-center {
align-items: center;
}
.justify-content-between {
justify-content: space-between;
}
.gap-10 {
gap: 10px;
}
.gap-20 {
gap: 20px;
}
.text-center {
text-align: center;
}
/* Image Setup */
img {
max-width: 100%;
height: auto;
display: block;
}
/* Base Link */
a {
color: var(--primary-color);
text-decoration: none;
transition: all 0.3s ease;
}
a:hover {
color: var(--accent-color);
}
/* WooCommerce Overrides */
.woocommerce div.product .woocommerce-tabs ul.tabs {
padding: 0;
margin: 0 0 20px 0;
list-style: none;
display: flex;
border-bottom: 2px solid var(--border-color);
}
.woocommerce div.product .woocommerce-tabs ul.tabs li {
border: none;
background: transparent;
margin: 0 20px 0 0;
padding: 0;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li a {
font-weight: bold;
color: var(--text-color);
padding: 10px 0;
display: block;
text-transform: uppercase;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a {
color: var(--primary-color);
border-bottom: 3px solid var(--accent-color);
}
.woocommerce div.product form.cart .button {
background-color: var(--accent-color) !important;
color: #fff !important;
border-radius: 4px;
font-weight: bold;
text-transform: uppercase;
}
/* =========================================
HEADER _hhungfarm
========================================= */
/* Wrapper: giới hạn toàn bộ header trong 1230px, căn giữa */
.header_hhungfarm {
max-width: 1230px;
margin: 0 auto;
overflow: visible;
position: relative;
}
.top_bar_hhungfarm {
background-color: #105029;
background-image: url('assets/images/nen_top_1.png');
background-size: cover;
background-position: center;
background-repeat: no-repeat;
padding: 10px 0;
text-align: center;
}
.top_link_hhungfarm {
text-decoration: none;
color: #ffffff;
font-size: 16px;
font-weight: 500;
display: inline-flex;
align-items: center;
gap: 10px;
}
.top_link_hhungfarm i {
color: #FF9E03;
}
.top_link_hhungfarm:hover {
color: #FF9E03;
}
/* Container */
.container_hhungfarm {
max-width: 1230px;
margin: 0 auto;
padding: 0 25px;
box-sizing: border-box;
position: relative;
width: 100%;
}
/* Main Header (Row 2: white bg, logo + search + phone) */
.main_header_hhungfarm {
background-color: #ffffff;
padding: 0;
padding-top: 3px;
}
.flex_header_hhungfarm {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
}
/* Nav Bar (Row 3: white bg, navigation menu) */
.nav_bar_hhungfarm {
background-color: #ffffff;
border-bottom: 1px solid #105029;
}
/* Logo */
.logo_hhungfarm img {
max-height: 70px;
width: auto;
height: auto;
display: block;
object-fit: contain;
}
.logo_hhungfarm a {
display: inline-block;
}
.logo_hhungfarm .site-title-text {
color: #ffffff;
text-decoration: none;
font-size: 24px;
font-weight: 500;
}
/* Navigation (inside nav_bar_hhungfarm) */
.nav_hhungfarm {
display: flex;
}
.nav_hhungfarm ul.nav-menu {
list-style: none;
display: flex;
gap: 0;
align-items: center;
margin: 0;
padding: 0;
}
.nav_hhungfarm ul.nav-menu>li {
position: relative;
}
.nav_hhungfarm ul.nav-menu>li>a {
color: #105029;
text-decoration: none;
font-size: 17px;
font-weight: 600;
text-transform: uppercase;
padding: 10px 30px;
white-space: nowrap;
display: block;
transition: color 0.2s;
}
.nav_hhungfarm ul.nav-menu>li>a:first-child {
padding-left: 0;
}
.nav_hhungfarm ul.nav-menu>li:hover>a,
.nav_hhungfarm ul.nav-menu>li.current-menu-item>a,
.nav_hhungfarm ul.nav-menu>li.current-menu-ancestor>a {
color: #FF9E03;
}
.nav_hhungfarm ul.nav-menu>li.current-menu-item>a,
.nav_hhungfarm ul.nav-menu>li.current-menu-ancestor>a {
color: #FF9E03;
}
/* Dropdown sub-menu */
.nav_hhungfarm ul.nav-menu>li>ul.sub-menu {
position: absolute;
top: 100%;
left: 0;
min-width: 220px;
background: #ffffff;
border-radius: 8px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.18);
padding: 10px 0;
list-style: none;
margin: 0;
z-index: 999;
opacity: 0;
visibility: hidden;
transform: translateY(10px);
transition: all 0.3s ease;
}
.nav_hhungfarm ul.nav-menu>li:hover>ul.sub-menu {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
.nav_hhungfarm ul.nav-menu li ul.sub-menu li a {
display: block;
padding: 9px 20px;
color: #000;
text-decoration: none;
font-size: 17px;
border-bottom: 1px solid #f0f0f0;
transition: all 0.2s;
}
.nav_hhungfarm ul.nav-menu li ul.sub-menu li:last-child a {
border-bottom: none;
}
.nav_hhungfarm ul.nav-menu li ul.sub-menu li a:hover {
color: #105029;
padding-left: 25px;
background: #f8f8f8;
}
/* =========================================
MEGA MENU STYLES
========================================= */
.nav_hhungfarm ul.nav-menu>li.has-mega-menu-parent {
position: static !important;
}
.nav_hhungfarm ul.nav-menu>li>ul.sub-menu.is-mega-menu {
display: flex !important;
flex-wrap: wrap !important;
gap: 30px !important;
width: auto !important;
left: 0 !important;
transform: translateY(10px);
padding: 25px 30px !important;
opacity: 0 !important;
visibility: hidden !important;
pointer-events: none !important;
}
.nav_hhungfarm ul.nav-menu>li:hover>ul.sub-menu.is-mega-menu {
transform: translateY(0) !important;
opacity: 1 !important;
visibility: visible !important;
pointer-events: auto !important;
}
.nav_hhungfarm ul.nav-menu>li>ul.sub-menu.is-mega-menu>li {
flex: 1 !important;
min-width: 250px !important;
border-bottom: none !important;
}
.nav_hhungfarm ul.nav-menu>li>ul.sub-menu.is-mega-menu>li>a {
font-size: 17px !important;
font-weight: 500 !important;
color: var(--primary-color) !important;
text-transform: capitalize !important;
padding: 0 0 10px 0 !important;
margin-bottom: 10px !important;
border-bottom: 1px solid var(--primary-color) !important;
background: transparent !important;
display: block !important;
}
.nav_hhungfarm ul.nav-menu>li>ul.sub-menu.is-mega-menu>li>ul.sub-menu {
position: static !important;
opacity: 1 !important;
visibility: visible !important;
transform: none !important;
box-shadow: none !important;
padding: 0 !important;
min-width: auto !important;
background: transparent !important;
display: block !important;
height: auto !important;
overflow: visible !important;
}
.nav_hhungfarm ul.nav-menu>li>ul.sub-menu.is-mega-menu>li>ul.sub-menu>li {
list-style: none !important;
display: block !important;
visibility: visible !important;
opacity: 1 !important;
}
.nav_hhungfarm ul.nav-menu>li>ul.sub-menu.is-mega-menu>li>ul.sub-menu>li>a {
display: block !important;
padding: 10px 0 10px 0 !important;
font-size: 17px !important;
color: #000 !important;
font-weight: 400 !important;
border-bottom: 1px solid #e5e5e5 !important;
transition: color 0.2s, padding-left 0.2s !important;
background: transparent !important;
visibility: visible !important;
opacity: 1 !important;
}
.nav_hhungfarm ul.nav-menu>li>ul.sub-menu.is-mega-menu>li>ul.sub-menu>li:last-child>a {
border-bottom: 1px solid #e5e5e5 !important;
}
.nav_hhungfarm ul.nav-menu>li>ul.sub-menu.is-mega-menu>li>ul.sub-menu>li>a:hover {
color: var(--primary-color) !important;
padding-left: 5px !important;
}
.mega-text-danger {
color: var(--danger-color) !important;
}
/* Search Box */
.search_box_hhungfarm {
position: relative;
flex: 1;
max-width: 615px;
flex-shrink: 0;
}
.search_box_hhungfarm form {
display: flex;
align-items: center;
background: #fff;
border: 1px solid #105029;
border-radius: 25px;
padding: 0px 20px;
}
.search_box_hhungfarm input[type="search"] {
width: 100%;
padding: 11.4px;
border: none;
background: transparent;
font-size: 14px;
outline: none;
color: #000;
}
.search_icon_hhungfarm {
position: absolute;
left: 21px;
top: 50%;
transform: translateY(-50%);
color: #888;
pointer-events: none;
display: none;
}
.search_box_hhungfarm button[type="submit"] {
background: none;
border: none;
padding: 6px 10px;
cursor: pointer;
color: #888;
display: flex;
align-items: center;
}
/* Phone / Zalo Button */
.btn_zalo_hhungfarm {
background-color: #AF0B0B;
color: #ffffff;
padding: 11px 20px;
border-radius: 8px;
text-decoration: none;
font-weight: 600;
font-size: 14px;
display: flex;
align-items: center;
gap: 8px;
white-space: nowrap;
flex-shrink: 0;
transition: background-color 0.25s;
}
.btn_zalo_hhungfarm:hover {
background-color: #105029;
color: #ffffff;
}
/* Responsive Header */
@media (max-width: 1100px) {
.nav_bar_hhungfarm {
display: none;
}
.search_box_hhungfarm {
display: none;
}
}
/* =========================================
PRODUCT CARD GRID
========================================= */
ul.products {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-wrap: wrap;
gap: 20px;
}
ul.products li.product {
flex: 0 0 calc(25% - 15px);
border: 1px solid var(--border-color);
border-radius: 6px;
overflow: hidden;
background: #fff;
transition: box-shadow 0.3s ease;
}
ul.products li.product:hover {
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
}
ul.products li.product a img {
width: 100%;
height: 220px;
object-fit: cover;
transition: transform 0.3s ease;
}
ul.products li.product:hover a img {
transform: scale(1.03);
}
ul.products li.product .woocommerce-loop-product__title {
font-size: 15px;
font-weight: 600;
padding: 12px 12px 5px;
color: var(--primary-color);
}
ul.products li.product .price {
padding: 0 12px 10px;
font-size: 15px;
font-weight: bold;
color: var(--danger-color);
}
ul.products li.product .button {
display: block;
margin: 0 12px 12px;
background: var(--accent-color);
color: var(--primary-color) !important;
padding: 8px;
text-align: center;
border-radius: 4px;
font-weight: bold;
font-size: 13px;
}
/* =========================================
FLOATING CONTACT SIDEBAR
========================================= */
.floating-contact {
position: fixed;
right: 0;
top: 50%;
transform: translateY(-50%);
z-index: 9990;
display: flex;
flex-direction: column;
gap: 4px;
}
.floating-contact a {
display: flex;
align-items: center;
justify-content: center;
width: 48px;
height: 48px;
color: #fff;
font-size: 22px;
border-radius: 6px 0 0 6px;
transition: width 0.25s ease, background 0.2s;
overflow: hidden;
text-decoration: none;
}
.floating-contact a:hover {
width: 62px;
}
.float-phone {
background: var(--danger-color);
}
.float-zalo {
background: #0068ff;
}
.float-map {
background: var(--primary-color);
}
/* =========================================
SECTION TITLE
========================================= */
.section-title {
font-size: 22px;
font-weight: 500;
color: var(--primary-color);
position: relative;
text-transform: uppercase;
}
/* =========================================
MARGIN UTILITIES
========================================= */
.mb-20 {
margin-bottom: 20px;
}
.mb-40 {
margin-bottom: 40px;
}
/* =========================================
RESPONSIVE
========================================= */
@media (max-width: 1024px) {
ul.products li.product {
flex: 0 0 calc(33.333% - 14px);
}
}
@media (max-width: 768px) {
.header-center {
display: none !important;
}
ul.products li.product {
flex: 0 0 calc(50% - 10px);
}
.d-flex {
flex-wrap: wrap;
}
.floating-contact {
top: auto;
bottom: 10px;
transform: none;
flex-direction: row;
right: 10px;
}
.floating-contact a {
border-radius: 50%;
width: 44px;
height: 44px;
}
.floating-contact a:hover {
width: 44px;
}
}
@media (max-width: 480px) {
ul.products li.product {
flex: 0 0 100%;
}
}
/* =========================================
PRODUCT DETAIL PAGE — Main Layout
========================================= */
.hungfarm-product-wrap {
display: flex;
gap: 30px;
background: #fff;
border: 1px solid var(--border-color);
border-radius: 8px;
padding: 25px;
margin-bottom: 40px;
align-items: flex-start;
}
.hungfarm-gallery {
flex: 1.2;
position: relative;
min-width: 0;
}
.hungfarm-summary {
flex: 1;
min-width: 0;
}
/* Badge nhĂ£n đặc biệt */
.hungfarm-badge {
position: absolute;
top: 10px;
left: 10px;
background: var(--danger-color);
color: #fff;
font-size: 11px;
font-weight: 500;
padding: 4px 10px;
border-radius: 3px;
text-transform: uppercase;
z-index: 5;
letter-spacing: 0.5px;
}
/* TiĂªu Ä‘á» sản phẩm */
.hungfarm-product-title {
font-size: 22px;
font-weight: 500;
color: var(--primary-color);
line-height: 1.4;
margin: 0 0 16px 0;
text-transform: uppercase;
padding-bottom: 15px;
}
/* MĂ´ tả nổi báºt ná»n vĂ ng */
.hungfarm-highlight-box {
background: #fffae6;
border: 1px dashed var(--accent-color);
border-radius: 4px;
padding: 14px 16px;
margin-bottom: 20px;
font-size: 14px;
line-height: 1.7;
color: #444;
}
/* ── Header khu vá»±c BĂ¡o giĂ¡ / Kho ── */
.hungfarm-kho-header {
background: var(--primary-color);
color: #fff;
padding: 10px 16px;
border-radius: 4px;
margin-bottom: 14px;
font-weight: 500;
font-size: 14px;
display: flex;
align-items: center;
gap: 8px;
}
/* ── Tab Kho ── */
.hungfarm-kho-tabs {
display: flex;
gap: 0;
margin-bottom: 14px;
border-bottom: 2px solid var(--border-color);
}
.hungfarm-kho-tab {
background: #f3f3f3;
border: 1px solid var(--border-color);
border-bottom: none;
padding: 9px 20px;
font-weight: 600;
font-size: 13px;
cursor: pointer;
color: var(--text-color);
transition: background 0.2s, color 0.2s;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.hungfarm-kho-tab.active,
.hungfarm-kho-tab:hover {
background: var(--primary-color);
color: #fff;
border-color: var(--primary-color);
}
.hungfarm-kho-panel {
display: none;
}
.hungfarm-kho-panel.active {
display: block;
}
/* ── Bảng biến thể ── */
.hungfarm-variations-table {
width: 100%;
border-collapse: collapse;
font-size: 13px;
}
.hungfarm-variations-table thead {
background: var(--bg-light);
}
.hungfarm-variations-table th {
padding: 8px 12px;
text-align: left;
font-weight: 600;
color: var(--primary-color);
border-bottom: 2px solid var(--border-color);
font-size: 12px;
text-transform: uppercase;
}
.hungfarm-variations-table td {
padding: 10px 12px;
vertical-align: middle;
border-bottom: 1px solid #f0f0f0;
}
.hungfarm-var-image img {
border-radius: 4px;
object-fit: cover;
}
.hungfarm-var-name {
display: block;
font-weight: 600;
color: var(--primary-color);
margin-bottom: 3px;
}
.hungfarm-var-attrs {
display: inline-block;
background: #e8f5e9;
color: var(--primary-color);
font-size: 11px;
padding: 2px 8px;
border-radius: 20px;
font-weight: 500;
}
.hungfarm-var-price {
margin-top: 4px;
font-weight: 500;
color: var(--danger-color);
}
/* Trạng thĂ¡i tồn kho */
.hungfarm-stock-badge {
font-size: 12px;
font-weight: 600;
white-space: nowrap;
}
.hungfarm-stock-badge.in-stock {
color: #105029;
}
.hungfarm-stock-badge.out-of-stock {
color: #888;
}
/* NĂºt actions trong bảng */
.hungfarm-btn-baogiai {
display: block;
text-align: center;
padding: 6px 10px;
border: 1px solid var(--primary-color);
color: var(--primary-color);
border-radius: 3px;
font-size: 12px;
font-weight: 600;
margin-bottom: 5px;
white-space: nowrap;
transition: background 0.2s, color 0.2s;
}
.hungfarm-btn-baogiai:hover {
background: var(--primary-color);
color: #fff;
}
.hungfarm-btn-addcart {
width: 100%;
padding: 6px 10px;
background: var(--accent-color);
color: var(--primary-color) !important;
border: none;
border-radius: 3px;
font-size: 12px;
font-weight: 500;
cursor: pointer;
transition: opacity 0.2s;
}
.hungfarm-btn-addcart:hover {
opacity: 0.85;
}
.hungfarm-var-note {
margin: 10px 0 0;
color: #888;
font-size: 12px;
}
/* ── NĂºt CTA bổ sung ── */
.hungfarm-extra-actions {
display: flex;
gap: 10px;
margin-top: 18px;
}
.hungfarm-btn-call {
flex: 1;
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
background: var(--danger-color);
color: #fff !important;
padding: 12px;
border-radius: 4px;
font-weight: 500;
font-size: 14px;
text-align: center;
}
.hungfarm-btn-zalo {
flex: 1;
display: flex;
align-items: center;
justify-content: center;
background: #0068ff;
color: #fff !important;
padding: 12px;
border-radius: 4px;
font-weight: 500;
font-size: 14px;
text-align: center;
}
/* Khung hotline */
.hungfarm-hotline-box {
display: flex;
gap: 20px;
background: var(--primary-color);
color: #fff;
padding: 14px 16px;
border-radius: 4px;
margin-top: 16px;
font-size: 13px;
}
.hungfarm-hotline-item a {
color: var(--accent-color);
font-weight: 500;
}
/* ──/* ── Tabs section dưới ── */
/* (Styles moved to the new layout block below around line 1751) */
/* ── Related products ── */
.hungfarm-related {
margin-bottom: 50px;
}
.hungfarm-section-heading {
font-size: 20px;
font-weight: 500;
color: var(--primary-color);
border-left: 5px solid var(--accent-color);
padding-left: 12px;
margin-bottom: 20px;
text-transform: uppercase;
}
/* =========================================
REVIEWS LAYOUT
========================================= */
.hungfarm-reviews-wrapper {
padding: 20px 0;
}
.hungfarm-rating-summary {
display: flex;
align-items: center;
gap: 30px;
background: var(--bg-light);
border-radius: 6px;
padding: 20px 24px;
margin-bottom: 24px;
}
.hungfarm-score-big {
font-size: 52px;
font-weight: 500;
color: var(--primary-color);
line-height: 1;
}
.hungfarm-stars-display {
display: flex;
gap: 3px;
margin-bottom: 4px;
}
.hungfarm-rating-bars {
flex: 1;
}
.hungfarm-rating-bar-row {
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 6px;
font-size: 13px;
}
.hungfarm-bar-label {
width: 38px;
text-align: right;
color: #555;
font-weight: 600;
}
.hungfarm-bar-track {
flex: 1;
height: 8px;
background: #e0e0e0;
border-radius: 10px;
overflow: hidden;
}
.hungfarm-bar-fill {
height: 100%;
background: var(--accent-color);
border-radius: 10px;
transition: width 0.5s ease;
}
.hungfarm-bar-count {
width: 22px;
color: #888;
font-size: 12px;
}
/* Danh sĂ¡ch review */
.hungfarm-review-item {
border-bottom: 1px solid #f0f0f0;
padding: 16px 0;
}
.hungfarm-review-header {
display: flex;
justify-content: space-between;
align-items: flex-start;
margin-bottom: 8px;
}
.hungfarm-reviewer-info {
display: flex;
align-items: center;
gap: 10px;
}
.hungfarm-reviewer-info img {
border-radius: 50%;
display: inline-block;
}
.hungfarm-review-date {
display: block;
font-size: 12px;
color: #999;
margin-top: 2px;
}
.hungfarm-review-stars {
display: flex;
gap: 2px;
}
.hungfarm-review-body {
font-size: 14px;
line-height: 1.7;
color: #444;
}
.hungfarm-load-more-wrap {
text-align: center;
padding: 20px 0;
}
.hungfarm-load-more-btn {
background: var(--accent-color);
color: var(--primary-color);
border: none;
padding: 12px 40px;
font-weight: 500;
font-size: 14px;
border-radius: 4px;
cursor: pointer;
text-transform: uppercase;
letter-spacing: 0.5px;
}
/* Form Ä‘Ă¡nh giĂ¡ */
.hungfarm-review-form-wrap {
background: var(--bg-light);
border-radius: 6px;
padding: 24px;
margin-top: 20px;
}
.hungfarm-form-title {
font-size: 17px;
font-weight: 500;
color: var(--primary-color);
margin: 0 0 16px;
}
.hungfarm-review-form-wrap input[type="text"],
.hungfarm-review-form-wrap input[type="email"],
.hungfarm-review-form-wrap textarea {
width: 100%;
border: 1px solid var(--border-color);
border-radius: 4px;
padding: 10px 14px;
font-size: 14px;
margin-top: 4px;
box-sizing: border-box;
}
.hungfarm-submit-review {
background: var(--primary-color) !important;
color: #fff !important;
padding: 12px 30px !important;
border-radius: 4px !important;
font-weight: 700 !important;
font-size: 14px !important;
border: none !important;
cursor: pointer !important;
text-transform: uppercase !important;
}
/* =========================================
RESPONSIVE — Product Detail
========================================= */
@media (max-width: 900px) {
.hungfarm-product-wrap {
flex-direction: column;
}
.hungfarm-gallery,
.hungfarm-summary {
flex: unset;
width: 100%;
}
.hungfarm-rating-summary {
flex-direction: column;
align-items: flex-start;
gap: 16px;
}
.hungfarm-hotline-box {
flex-direction: column;
gap: 8px;
}
.hungfarm-variations-table thead {
display: none;
}
.hungfarm-variations-table td {
display: block;
border-bottom: none;
}
.hungfarm-variations-table tr {
border-bottom: 1px solid #eee;
}
}
/* â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•
PRODUCT DETAIL — New Layout (Gallery + Info Two Column)
â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â• */
/* Breadcrumb */
.hungfarm-breadcrumb {
font-size: 16px;
color: #000;
padding: 0;
}
.hungfarm-breadcrumb p {
padding: 0;
margin: 10px 0;
}
.hungfarm-breadcrumb a {
color: var(--primary-color);
text-decoration: none;
}
.hungfarm-breadcrumb a:hover {
text-decoration: underline;
}
/* ── 2-Column Wrapper ── */
.hungfarm-product-top {
display: flex;
gap: 20px;
align-items: flex-start;
margin-bottom: 40px;
}
/* â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•
GALLERY COLUMN (left ~46%)
â•â•â••â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â• */
.hungfarm-gallery-col {
flex: 0 0 600px;
width: 600px;
display: flex;
flex-wrap: wrap;
gap: 10px;
position: relative;
border-radius: 10px;
overflow: hidden;
}
/* Container bao quanh hungfarm-thumb-strip và 2 nút tròn */
.hungfarm-thumb-wrap {
flex: 0 0 140px;
width: 140px;
position: relative;
/* nút tròn absolute sẽ căn theo đây */
}
/* Nút tròn ▲ ▼ — position absolute trong hungfarm-thumb-wrap */
.hungfarm-tnav-up,
.hungfarm-tnav-down {
position: absolute !important;
left: 50% !important;
transform: translateX(-50%) !important;
display: none;
align-items: center;
justify-content: center;
width: 32px !important;
height: 32px !important;
border-radius: 50% !important;
background: rgba(255, 255, 255, 0.92) !important;
border: 1px solid #ddd !important;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.22) !important;
cursor: pointer;
color: #333 !important;
transition: background 0.2s, transform 0.2s;
padding: 0 !important;
z-index: 5;
}
.hungfarm-tnav-up {
top: 4px !important;
}
.hungfarm-tnav-down {
bottom: 4px !important;
}
.hungfarm-tnav-up::before {
content: "▲";
font-size: 11px;
}
.hungfarm-tnav-down::before {
content: "▼";
font-size: 11px;
}
.hungfarm-tnav-up:hover,
.hungfarm-tnav-down:hover {
background: var(--primary-color) !important;
color: #fff !important;
border-color: var(--primary-color) !important;
transform: scale(1.1);
}
.hungfarm-tnav-up:disabled,
.hungfarm-tnav-down:disabled {
opacity: 0.3;
cursor: default;
}
/* Thumbnail strip — vertical, left side */
.hungfarm-thumb-strip {
display: flex;
flex-direction: column;
gap: 6px;
width: 140px;
overflow-y: scroll;
/* scroll để JS scrollBy() hoạt động; scrollbar bị ẩn bởi CSS bên dưới */
max-height: 600px;
box-sizing: border-box;
scrollbar-width: none;
-ms-overflow-style: none;
}
.hungfarm-thumb-strip::-webkit-scrollbar {
display: none;
/* Chrome/Safari */
}
.hungfarm-thumb-btn {
width: 140px;
height: 196px;
/* 3 ảnh × 196px + 2 gap × 6px = 600px (khớp ảnh lớn) */
padding: 0;
border: 2px solid transparent;
box-sizing: border-box;
overflow: hidden;
cursor: pointer;
background: none;
transition: border-color 0.2s;
flex-shrink: 0;
}
.hungfarm-thumb-btn:hover,
.hungfarm-thumb-btn.active {
border-color: #AF0B0B;
}
.hungfarm-thumb-btn img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center top;
display: block;
}
/* ── Hàng ngang [◀] [ảnh lớn] [▶] ── */
.hungfarm-main-nav-row {
display: flex;
align-items: center;
gap: 8px;
flex: 1;
min-width: 0;
}
/* Main image area */
.hungfarm-main-img-wrap {
flex: 0 0 450px;
width: 450px;
height: 600px;
position: relative;
overflow: hidden;
cursor: zoom-in;
background: #f5f5f5;
border-radius: 10px;
border-top-left-radius: 0;
border-bottom-left-radius: 0;
}
/* Ảnh lớn — fill 100% container */
.hungfarm-main-img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.hungfarm-main-img-slide {
width: 100%;
height: 100%;
}
.hungfarm-main-img-slide.hungfarm-hidden {
display: none;
}
/* ── Nút Prev / Next trong bộ đếm ảnh ── */
.hungfarm-main-prev,
.hungfarm-main-next {
flex-shrink: 0;
width: 24px;
height: 24px;
border-radius: 50%;
background: rgba(0, 0, 0, 0.15);
border: none;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
color: #fff;
transition: background 0.2s, transform 0.2s;
padding: 0;
line-height: 1;
}
.hungfarm-main-prev:hover,
.hungfarm-main-next:hover {
background: var(--primary-color);
transform: scale(1.1);
}
@media (max-width: 960px) {
.hungfarm-gallery-col {
flex-direction: column !important;
}
.hungfarm-main-img-wrap {
order: 1;
flex: unset;
width: 100%;
height: 60vw;
max-height: 500px;
}
.hungfarm-thumb-wrap {
order: 3;
}
}
/* Badge BẢO HĂ€NH — gold pill, top-right of image */
.hungfarm-guarantee-badge {
position: absolute;
top: 12px;
right: 12px;
background: #FF9E03;
color: #fff;
font-size: 14px;
font-weight: 400;
padding: 9px 14px;
border-radius: 5px;
z-index: 5;
pointer-events: none;
text-transform: uppercase;
}
/* XEM VIDEO button — red, lower-right of image */
.hungfarm-video-btn {
position: absolute;
/* Bên dưới badge BẢO HÀNH: badge top 12px, cao ~28px, + gap 6px = 46px */
top: 55px;
right: 12px;
background: #AF0B0B;
color: #fff !important;
font-size: 14px;
font-weight: 400;
padding: 9px 27px;
border-radius: 5px;
display: flex;
align-items: center;
gap: 6px;
z-index: 5;
text-decoration: none;
}
.hungfarm-video-btn:hover {
opacity: 0.88;
color: #fff !important;
}
/* Counter "Ảnh 1/10" — bottom-left */
/* Bộ đếm ảnh — flex row [prev] [text] [next] */
.hungfarm-img-counter {
position: absolute;
bottom: 0;
right: 0;
background: #ffffffa8;
color: #00000099;
font-size: 14px;
border-radius: 0;
z-index: 6;
display: flex;
align-items: center;
gap: 6px;
padding: 4px 8px;
}
/* â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â• â•â• â• â•â• â•â•â• â•â•â•â•â•â• â•
INFO COLUMN (right ~54%)
â• â• â• â• â• â• â• â•â• â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â• */
.hungfarm-info-col {
flex: 0 0 560px;
width: 560px;
min-width: 0;
}
/* H1 product title */
.hungfarm-product-title {
font-size: 29px;
font-weight: 500;
color: var(--primary-color);
line-height: 1.2;
margin: 0;
text-transform: uppercase;
}
.hungfarm-italic-quote {
font-weight: 400;
font-size: 17px;
line-height: 1.5;
color: #000;
text-align: justify;
border-left: 5px solid #D4AF37;
margin: 0 0 15px 0;
padding: 15px 18px;
background: rgba(255, 158, 3, 0.15);
border-radius: 0 10px 10px 0;
}
/* Checklist — 2 columns */
.hungfarm-checklist-wrap {
display: flex;
gap: 6px;
margin-bottom: 15px;
}
.hungfarm-checklist-col {
list-style: none;
padding: 0;
margin: 0;
flex: 1;
}
.hungfarm-checklist-col li {
display: flex;
align-items: flex-start;
gap: 7px;
font-size: 17px;
color: #105029;
margin-bottom: 5px;
line-height: 1.2;
}
.hungfarm-checklist-col li svg {
flex-shrink: 0;
margin-top: 1px;
}
.hungfarm-checklist-col li img {
width: 20px;
}
/* CTA Buttons */
.hungfarm-cta-wrap {
display: flex;
gap: 10px;
margin-bottom: 15px;
}
.hungfarm-cta {
flex: 1;
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
padding: 10px 10px;
border-radius: 10px;
font-weight: 500;
font-size: 20px;
text-align: center;
transition: 1;
white-space: nowrap;
text-decoration: none;
}
.hungfarm-cta-wrap .hungfarm-cta svg {
width: 24px;
height: 24px;
}
.container_hhungfarm.background_nen .rank-math-breadcrumb {
padding: 0;
}
.hungfarm-cta:hover {
opacity: 0.88;
transform: translateY(-1px);
}
.hungfarm-cta-red {
background: #AF0B0B;
color: #fff !important;
}
.hungfarm-cta-dark {
background: #AF0B0B;
color: #fff !important;
}
/* ── Cam Kết Block ── */
.hungfarm-camket-box {
border: none;
border-radius: 0;
overflow: visible;
margin-bottom: 10px;
background: transparent;
}
/* Header: centered title with decorative lines on both sides */
.hungfarm-camket-header {
background: transparent;
padding: 0;
display: flex;
align-items: center;
gap: 12px;
text-align: center;
}
/* Line left */
.hungfarm-camket-header::before,
.hungfarm-camket-header::after {
content: '';
flex: 1;
height: 1px;
background: #d0d0d0;
}
.hungfarm-camket-header strong {
flex-shrink: 0;
font-size: 20px;
font-weight: 500;
color: var(--primary-color);
white-space: nowrap;
}
.hungfarm-camket-header strong span {
color: #AF0B0B !important;
}
/* Slider nav buttons (kept for JS compat) */
.hungfarm-ck-nav {
display: flex;
align-items: center;
gap: 5px;
flex-shrink: 0;
}
.hungfarm-ck-prev,
.hungfarm-ck-next {
background: transparent;
border: 1px solid #c8ddc8;
border-radius: 50%;
width: 26px;
height: 26px;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
color: #105029;
transition: background 0.2s;
flex-shrink: 0;
}
.hungfarm-ck-prev:hover,
.hungfarm-ck-next:hover {
background: #eef8ee;
}
.hungfarm-ck-dots {
display: flex;
gap: 4px;
}
.hungfarm-ck-dot {
width: 7px;
height: 7px;
border-radius: 50%;
background: #c8ddc8;
cursor: pointer;
transition: background 0.2s, transform 0.2s;
}
.hungfarm-ck-dot.active {
background: var(--primary-color);
transform: scale(1.3);
}
/* Slider rows — show only .active */
.hungfarm-ck-slider {
position: relative;
}
.hungfarm-camket-row {
display: none;
align-items: center;
gap: 14px;
padding: 12px 0;
color: #000;
}
.hungfarm-camket-row:first-child {
border-top: none;
}
.hungfarm-camket-row.active {
display: flex;
}
/* Icon shield circle */
.hungfarm-camket-icon {
flex-shrink: 0;
width: 40px;
height: 40px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: #fff;
}
.hungfarm-camket-text {
flex: 1;
display: flex;
flex-direction: column;
gap: 2px;
}
.hungfarm-camket-text strong {
font-size: 16px;
font-weight: 500;
color: #105029;
line-height: 1.2;
}
.hungfarm-camket-text small {
font-size: 14px;
color: #000;
line-height: 1.2;
}
.hungfarm-camket-arrow {
flex-shrink: 0;
color: #bbb;
background: none;
border: none;
padding: 0;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
width: 32px;
height: 32px;
transition: background 0.15s, color 0.15s;
}
#hungfarm-bang-gia .bg-header svg {
width: 28px;
height: 28px;
}
.hungfarm-camket-arrow:hover {
background: #105029;
color: #fff;
}
/* ── Lead Capture Form ── */
.hungfarm-lead-form-box {
background: var(--primary-color, #105029);
border-radius: 10px;
padding: 16px 18px;
color: #fff;
}
.hungfarm-lead-intro {
font-size: 17px;
color: #fff;
margin: 0 0 12px;
line-height: 1.5;
}
.hungfarm-lead-row2 {
display: flex;
gap: 8px;
margin-bottom: 8px;
}
.hungfarm-lead-row1 {
display: flex;
gap: 8px;
}
.hungfarm-lead-form input[type="text"],
.hungfarm-lead-form input[type="tel"] {
flex: 1;
border: none;
border-radius: 4px;
padding: 10px 12px;
font-size: 13px;
background: #fff;
color: #333;
outline: none;
}
.hungfarm-lead-form input[type="text"]:focus,
.hungfarm-lead-form input[type="tel"]:focus {
box-shadow: 0 0 0 2px rgba(230, 184, 0, 0.5);
}
.hungfarm-lead-row1 input {
flex: 1;
border: none;
border-radius: 4px;
padding: 10px 12px;
font-size: 13px;
background: #fff;
color: #333;
outline: none;
}
.hungfarm-lead-form button[type="submit"] {
background: #e6b800;
color: #1a1a1a;
border: none;
border-radius: 4px;
padding: 10px 18px;
font-weight: 500;
font-size: 14px;
cursor: pointer;
white-space: nowrap;
transition: opacity 0.2s;
flex-shrink: 0;
letter-spacing: 0.2px;
}
.hungfarm-lead-form button[type="submit"]:hover {
opacity: 0.88;
}
/* â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•
BĂO GIĂ & KHO HĂ€NG Section
â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â• */
.hungfarm-banggia-section {
background: #fff;
border: 1px solid var(--border-color);
border-radius: 8px;
margin-bottom: 40px;
overflow: hidden;
}
.hungfarm-banggia-header {
background: var(--primary-color);
color: #fff;
font-size: 15px;
font-weight: 500;
padding: 13px 20px;
display: flex;
align-items: center;
gap: 10px;
text-transform: uppercase;
letter-spacing: 0.5px;
}
/* --- Tab wrapper ---- */
.hungfarm-tabs-wrapper {
background: #fff;
border-radius: 8px;
overflow: hidden;
margin-bottom: 40px;
}
/* --- Tab nav list --- */
.hungfarm-wc-tabs {
display: flex !important;
gap: 0 !important;
margin: 0 !important;
padding: 0 !important;
list-style: none !important;
background: #fff;
flex-wrap: nowrap;
overflow-x: auto;
scrollbar-width: none;
}
.hungfarm-wc-tabs::-webkit-scrollbar {
display: none;
}
/* --- Each tab item --- */
.hungfarm-tab-item {
flex-shrink: 0;
margin: 0 !important;
border: none !important;
background: transparent !important;
position: relative;
}
.hungfarm-tab-item a {
display: block;
padding: 15px 15px !important;
font-size: 18px !important;
font-weight: 700 !important;
letter-spacing: 0.6px !important;
text-transform: uppercase !important;
color: #000000 !important;
text-decoration: none !important;
border-bottom: 3px solid transparent;
margin-bottom: 0;
transition: color 0.2s, border-color 0.2s;
white-space: nowrap;
/* padding-left: 0 !important; */
}
.hungfarm-tab-item a:hover {
color: var(--primary-color) !important;
border-bottom-color: var(--primary-color) !important;
}
/* Active tab — bold + bottom line (like mockup) */
.hungfarm-tab-item.active a,
.hungfarm-tab-item.description_tab.active a {
color: var(--primary-color) !important;
border-bottom-color: #AF0B0B !important;
}
/* --- Tab panel --- */
.hungfarm-tab-panel {
display: none;
padding: 10px 0px 0 0px;
}
.hungfarm-tab-panel.active {
display: block;
}
.hungfarm-tab-content-inner {
font-size: 17px;
line-height: 1.5;
color: #000000;
max-width: 100%;
margin: 0 auto;
text-align: justify;
padding: 0 40px;
}
.hungfarm-tab-content-inner.hungfarm-tab-collapsed {
max-height: 1000px;
overflow: hidden;
position: relative;
}
.hungfarm-tab-content-inner.hungfarm-tab-collapsed::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 250px;
background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 100%);
pointer-events: none;
}
/* --- Read more button row --- */
.hungfarm-tab-read-more {
text-align: center;
padding: 18px 0 24px;
}
.hungfarm-read-more-btn {
display: inline-flex;
align-items: center;
gap: 6px;
background: none;
border: none;
font-size: 20px;
font-weight: bold;
color: #AF0B0B;
cursor: pointer;
padding: 0;
letter-spacing: 0.3px;
transition: opacity 0.2s;
}
.hungfarm-read-more-btn:hover {
opacity: 0.75;
}
.hungfarm-read-more-btn svg {
flex-shrink: 0;
transition: transform 0.2s;
}
.hungfarm-read-more-btn[aria-expanded="true"] svg {
transform: rotate(180deg);
}
.hungfarm-section-heading {
font-size: 20px;
font-weight: 500;
color: var(--primary-color);
text-align: center;
text-transform: uppercase;
margin: 0 0 24px;
letter-spacing: 0.5px;
position: relative;
padding-bottom: 12px;
}
.hungfarm-section-heading::after {
content: '';
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
width: 60px;
height: 3px;
background: var(--accent-color, #e6b800);
border-radius: 2px;
}
/* â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•
LIGHTBOX
â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â• */
/* ══════════════════════════════════════════
hungfarm-lightbox: ảnh lớn popup
══════════════════════════════════════════ */
.hungfarm-lightbox {
position: fixed;
inset: 0;
z-index: 99999;
display: flex;
align-items: center;
justify-content: center;
}
.hungfarm-lightbox[hidden] {
display: none;
}
.hungfarm-lightbox-overlay {
position: absolute;
inset: 0;
background: rgba(0, 0, 0, 0.82);
cursor: pointer;
}
/* White card popup */
.hungfarm-lightbox-content {
position: relative;
z-index: 1;
background: #fff;
border-radius: 12px;
overflow: hidden;
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}
/* Close button — top-right corner of the card */
.hungfarm-lb-close {
position: absolute;
top: 10px;
right: 10px;
z-index: 10;
width: 32px;
height: 32px;
border-radius: 50%;
border: none;
background: #AF0B0B;
color: #fff;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: background 0.15s;
}
.hungfarm-lb-close:hover {
background: #8a0a0a;
}
/* Inner: thumb column + image column */
.hungfarm-lb-inner {
display: flex;
flex-direction: row;
}
/* ── Thumbnail column ── */
.hungfarm-lb-thumbs {
width: 115px;
display: flex;
flex-direction: column;
gap: 5px;
overflow-y: auto;
flex-shrink: 0;
background: #f5f5f5;
max-height: 627px;
}
.hungfarm-lb-thumbs::-webkit-scrollbar {
width: 3px;
}
.hungfarm-lb-thumbs::-webkit-scrollbar-thumb {
background: #ccc;
border-radius: 3px;
}
.hungfarm-lbt {
width: 115px;
height: 153px;
flex-shrink: 0;
padding: 0;
border: 2px solid transparent;
background: transparent;
cursor: pointer;
overflow: hidden;
display: block;
transition: border-color 0.15s;
}
.hungfarm-lbt img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.hungfarm-lbt.active {
border-color: #AF0B0B;
}
.hungfarm-lbt:hover:not(.active) {
border-color: #ccc;
}
.hungfarm-lbt-video-icon {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
background: #111;
color: #fff;
}
/* ── Image column ── */
.hungfarm-lb-img-col {
display: flex;
flex-direction: column;
}
/* Media wrap — fixed width to fill popup */
.hungfarm-lb-media-wrap {
position: relative;
width: 470px;
height: 627px;
overflow: hidden;
background: #111;
flex-shrink: 0;
}
.hungfarm-lb-img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.hungfarm-lb-video-wrap {
display: none;
width: 100%;
height: 100%;
align-items: center;
justify-content: center;
background: #000;
}
.hungfarm-lb-video-wrap iframe {
width: 100%;
height: 100%;
border: none;
}
/* Badges: top-right inside image */
.hungfarm-lb-badges {
position: absolute;
top: 12px;
right: 12px;
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 8px;
}
.hungfarm-lb-badge-guarantee {
background: #e6a817;
color: #fff;
font-size: 12px;
font-weight: 500;
padding: 6px 12px;
border-radius: 6px;
letter-spacing: 0.3px;
text-transform: uppercase;
white-space: nowrap;
}
.hungfarm-lb-badge-video {
background: #AF0B0B;
color: #fff;
font-size: 12px;
font-weight: 500;
padding: 7px 13px;
border-radius: 6px;
display: flex;
align-items: center;
gap: 6px;
text-decoration: none;
letter-spacing: 0.3px;
white-space: nowrap;
transition: background 0.15s;
}
.hungfarm-lb-badge-video:hover {
background: #8a0a0a;
color: #fff;
}
/* Nav inside image */
.hungfarm-lb-prev,
.hungfarm-lb-next {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 36px;
height: 36px;
border-radius: 50%;
border: none;
background: rgba(0, 0, 0, 0.5);
color: #fff;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: background 0.15s;
}
.hungfarm-lb-prev:hover,
.hungfarm-lb-next:hover {
background: rgba(0, 0, 0, 0.85);
}
.hungfarm-lb-prev {
left: 10px;
}
.hungfarm-lb-next {
right: 10px;
}
/* Counter — bottom left */
.hungfarm-lb-counter {
position: absolute;
bottom: 10px;
left: 12px;
background: rgba(0, 0, 0, 0.6);
color: #fff;
font-size: 12px;
padding: 3px 10px;
border-radius: 20px;
white-space: nowrap;
backdrop-filter: blur(2px);
}
/* Caption bar below image */
.hungfarm-lb-caption {
background: #f9f9f9;
color: #444;
font-size: 13px;
text-align: center;
padding: 8px 12px;
margin: 0;
border-top: 1px solid #eee;
width: 470px;
box-sizing: border-box;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
/* CTA bar */
.hungfarm-lb-cta-bar {
display: flex;
flex-direction: row;
gap: 0;
width: 470px;
box-sizing: border-box;
}
.hungfarm-lb-cta {
flex: 1;
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
padding: 14px 12px;
font-size: 13.5px;
font-weight: 800;
letter-spacing: 0.3px;
color: #fff;
text-decoration: none;
background: #AF0B0B;
border: none;
cursor: pointer;
transition: filter 0.15s;
}
.hungfarm-lb-cta:hover {
filter: brightness(1.12);
color: #fff;
}
.hungfarm-lb-cta-call {
border-right: 1px solid rgba(255, 255, 255, 0.25);
}
.hungfarm-lb-cta-zalo {
background: #AF0B0B;
}
/* ── Responsive ── */
@media (max-width: 640px) {
.hungfarm-lb-inner {
flex-direction: column;
}
.hungfarm-lb-thumbs {
width: 100%;
height: 80px;
max-height: 80px;
flex-direction: row;
overflow-x: auto;
overflow-y: hidden;
}
.hungfarm-lbt {
width: 55px;
height: 73px;
flex-shrink: 0;
}
.hungfarm-lb-media-wrap {
width: 100vw;
height: 55vw;
}
.hungfarm-lb-img {
object-fit: contain;
}
.hungfarm-lb-caption,
.hungfarm-lb-cta-bar {
width: 100%;
}
}
/* â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•
RESPONSIVE
â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â• */
@media (max-width: 1230px) {
/* Khi màn hình nhỏ hơn tổng chiều rộng (600+20+580=1200), cho phép co lại */
.hungfarm-gallery-col {
flex: 0 0 50%;
width: 50%;
}
.hungfarm-info-col {
flex: 1;
width: auto;
}
.hungfarm-main-img-wrap {
flex: 1;
width: auto;
height: 480px;
}
}
@media (max-width: 960px) {
.hungfarm-product-top {
flex-direction: column;
gap: 16px;
}
.hungfarm-gallery-col,
.hungfarm-info-col {
flex: unset;
width: 100%;
}
/* Thumbnails go horizontal below main image on mobile */
.hungfarm-gallery-col {
flex-direction: column-reverse;
}
.hungfarm-main-img-wrap {
flex: unset;
width: 100%;
height: 60vw;
max-height: 500px;
}
.hungfarm-thumb-strip {
flex-direction: row;
flex: unset;
width: 100%;
overflow-x: auto;
max-height: unset;
}
.hungfarm-thumb-btn {
flex-shrink: 0;
width: 80px;
height: 80px;
}
}
@media (max-width: 600px) {
.hungfarm-cta-wrap {
flex-direction: column;
}
.hungfarm-lead-row2 {
flex-direction: column;
}
.hungfarm-checklist-wrap {
flex-direction: column;
}
.hungfarm-lb-prev,
.hungfarm-lb-next {
display: none;
}
.hungfarm-product-title {
font-size: 18px;
}
}
/* =============================================
BÁO GIÁ & KHO HÀNG v2 (.bg-*)
============================================= */
/* Section */
.bg-section {
background: #fff;
border: none;
border-radius: 8px;
overflow: hidden;
margin-bottom: 32px;
box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
}
.bg-header {
background: #105029;
color: #fff;
padding: 11px 20px;
font-weight: 500;
font-size: 15px;
display: flex;
align-items: center;
gap: 10px;
text-transform: uppercase;
letter-spacing: 0;
border-radius: 0;
}
/* Tabs wrap */
.bg-tabs-wrap {
padding: 20px 24px 0;
display: flex;
flex-direction: column;
align-items: center;
gap: 10px;
border-bottom: none;
}
.bg-tabs {
display: flex;
gap: 0;
border-radius: 8px;
overflow: hidden;
border: 5px solid #efefef;
padding: 4px;
background: #efefef;
}
.bg-tab {
padding: 11px 36px;
font-size: 20px;
font-weight: 500;
text-transform: uppercase;
letter-spacing: 0.5px;
cursor: pointer;
border: none;
background: #efefef;
color: #000000;
transition: background 0.2s, color 0.2s;
line-height: 1;
border-radius: 10px;
}
.bg-tab.active,
.bg-tab:hover {
background: #cc0000;
color: #fff;
}
.bg-tabs-hint {
font-size: 16px;
color: #000;
text-align: center;
font-style: italic;
margin: 0;
margin-bottom: 10px;
}
.bg-header h2 {
font-size: 26px !important;
}
/* Panel list */
.bg-list {
display: none;
padding: 0 45px 15px;
}
.bg-list.active {
display: block;
}
/* Row (nhóm cây) */
.bg-row {
border-bottom: 1px solid #ebebeb;
padding: 15px 0;
border-top: 1px solid #ebebeb;
margin-bottom: -1px;
}
.bg-row-main {
display: flex;
align-items: center;
gap: 14px;
padding: 0;
}
/* Thumbnail */
.bg-thumb {
width: 70px;
height: 70px;
object-fit: cover;
border-radius: 6px;
border: 1px solid #e0dbd5;
flex-shrink: 0;
}
.bg-thumb-placeholder {
display: flex;
align-items: center;
justify-content: center;
background: #f8f8f6;
}
/* Row text */
.bg-row-text {
flex: 1;
min-width: 0;
}
.bg-row-name {
font-size: 18px;
font-weight: 500;
color: #000;
margin: 0;
line-height: 1.2;
}
.bg-row-size {
font-size: 16px;
color: #000;
margin: 0;
padding-top: 5px;
padding-bottom: 5px;
}
.bg-row-status {
font-size: 16px;
font-weight: 500;
color: #AF0B0B;
margin: 0;
}
/* CTA buttons */
.bg-cta {
flex-shrink: 0;
display: inline-flex;
align-items: center;
gap: 7px;
padding: 9px 16px;
border-radius: 55px;
font-size: 16px;
font-weight: 500;
cursor: pointer;
text-decoration: none;
transition: all 0.15s;
white-space: nowrap;
border: 2px solid;
}
.bg-cta-red {
background: #cc0000;
border-color: #cc0000;
color: #fff;
}
.bg-cta-red:hover {
background: #a80000;
border-color: #a80000;
}
.bg-cta-red svg {
transition: transform 0.2s;
}
.bg-cta-eye {
background: transparent;
border-color: #444;
color: #444;
}
.bg-cta-eye:hover {
background: #f0f0f0;
}
.bg-cta-outline {
background: transparent;
color: #105029;
border-color: #105029;
}
.bg-cta-outline:hover {
background: #f0f0f0;
}
/* Sub-list (expandable) */
.bg-sub-list {
display: none;
margin-top: 12px;
border: none;
border-radius: 0;
overflow: hidden;
padding-left: 74px;
}
.bg-sub-list.open {
display: block;
}
.bg-sub-row {
background: #fff;
transition: background 0.15s;
}
.bg-sub-row {
display: flex;
align-items: center;
gap: 12px;
padding: 8px 0;
/* border-bottom: 1px solid #eeebe6; */
}
.bg-sub-row:last-child {
border-bottom: none;
}
/* Sub thumbnail */
.bg-sub-thumb {
width: 62px;
height: 62px;
object-fit: cover;
border-radius: 5px;
border: 1px solid #e0dbd5;
flex-shrink: 0;
}
.bg-sub-thumb-ph {
background: #f0ede9;
display: block;
}
/* Sub text */
.bg-sub-text {
flex: 1;
min-width: 0;
}
.bg-sub-name {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 6px;
font-size: 17px;
font-weight: 600;
color: #000;
line-height: 1.4;
}
.bg-sub-code {
font-size: 17px;
color: #000;
font-weight: 400;
}
.bg-sub-desc {
font-size: 16px;
color: #000000CC;
margin: 3px 0 0;
line-height: 1.2;
}
/* Stock badge */
.bg-stk {
display: inline-flex;
align-items: center;
gap: 4px;
font-size: 16px;
font-weight: 600;
padding: 2px 7px;
border-radius: 12px;
white-space: nowrap;
}
.bg-stk-in {
background: none;
color: #105029;
}
.bg-stk-low {
background: none;
color: #f57c00;
}
.bg-stk-out {
background: none;
color: #AF0B0B;
}
/* Sub arrow / action button */
.bg-sub-arrow {
flex-shrink: 0;
width: 34px;
height: 34px;
border: 1.5px solid #ddd;
background: #fff;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: all 0.15s;
color: #555;
text-decoration: none;
}
.bg-sub-arrow:hover {
background: var(--primary-color, #105029);
border-color: var(--primary-color, #105029);
color: #fff;
}
.bg-sub-arrow:hover svg {
stroke: #fff;
}
.bg-sub-arrow-out {
opacity: 0.4;
pointer-events: none;
}
/* Footer bar */
.bg-footer-bar {
background: #edab03;
border-radius: 0 0 8px 8px;
padding: 10px 50px;
overflow-x: auto;
}
.bg-footer-scroll {
display: flex;
justify-content: space-between;
align-items: center;
width: 100%;
}
.bg-footer-item {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 17px;
color: #105029;
font-weight: 500;
white-space: nowrap;
}
.bg-footer-item svg {
stroke: #105029;
flex-shrink: 0;
padding: 3px;
border: 1px solid #105029;
border-radius: 100%;
}
/* No data */
.bg-no-data-p {
padding: 20px;
color: #888;
font-size: 13px;
}
/* Lưu ý note */
.bg-luu-y {
font-size: 16px;
color: #00000099;
font-style: italic;
text-align: center;
padding: 6px 24px 12px;
margin: 0;
}
.bg-no-data-center {
padding: 30px 20px;
text-align: center;
}
/* Hidden gallery data - MUST be visually hidden */
.bg-gal-data {
display: none !important;
}
/* ── Lightbox ── */
/* ═══════════════════════════════════════════════════════
BÁO GIÁ LIGHTBOX — 2-Panel Design
═══════════════════════════════════════════════════════ */
.bg-lb {
position: fixed;
inset: 0;
z-index: 99999;
display: flex;
align-items: center;
justify-content: center;
}
.bg-lb[hidden] {
display: none !important;
}
.bg-lb-overlay {
position: absolute;
inset: 0;
background: rgba(0, 0, 0, 0.85);
cursor: pointer;
}
.bg-lb-box {
position: relative;
background: #fff;
border-radius: 10px;
width: min(96vw, 970px);
max-height: 92vh;
display: flex;
flex-direction: row;
overflow: hidden;
box-shadow: 0 24px 70px rgba(0, 0, 0, 0.5);
z-index: 1;
padding: 30px 15px;
}
/* ── Nút đóng ── */
.bg-lb-close {
position: absolute;
top: 10px;
right: 12px;
z-index: 20;
background: rgba(0, 0, 0, 0.6);
border: none;
color: #fff;
font-size: 28px;
cursor: pointer;
width: 36px;
height: 36px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
line-height: 1;
transition: background 0.15s;
}
.bg-lb-close:hover {
background: rgba(0, 0, 0, 0.9);
}
/* ─────────────────────────────────────────
Panel trái: thumb strip dọc + ảnh lớn
───────────────────────────────────────── */
.bg-lb-left {
flex: 0 0 auto;
display: flex;
flex-direction: row;
background: #fff;
overflow: hidden;
}
.bg-lb-thumbs-col {
width: 115px;
height: 627px;
flex-shrink: 0;
display: flex;
flex-direction: column;
gap: 5px;
padding: 0;
overflow-x: hidden;
background: #fff0;
align-self: flex-start;
margin-right: 5px;
padding-right: 5px;
}
.bg-lb-thumbs-col::-webkit-scrollbar {
width: 4px;
}
.bg-lb-thumbs-col::-webkit-scrollbar-track {
background: transparent;
}
.bg-lb-thumbs-col::-webkit-scrollbar-thumb {
background: #555;
border-radius: 4px;
}
/* Thumbnail item */
.bg-lb-t {
width: 115px;
height: 153px !important;
/* 4x153 + 3x5gap = 627px = ảnh chính */
object-fit: cover;
border-radius: 5px;
opacity: 1;
cursor: pointer;
flex-shrink: 0;
border: 1px solid transparent;
transition: all 0.18s;
display: block;
}
.bg-lb-t.active,
.bg-lb-t:hover {
opacity: 1;
border-color: #edab03;
}
/* Image + caption column */
.bg-lb-img-col {
display: flex;
flex-direction: column;
flex: 0 0 auto;
}
/* Main image wrap — fixed 470x627 */
.bg-lb-img-wrap {
position: relative;
width: 470px;
height: 627px;
overflow: hidden;
background: #fff;
flex-shrink: 0;
}
.bg-lb-main-img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
/* Caption below image */
.bg-lb-img-caption {
background: #fff;
color: #000;
font-size: 12.5px;
text-align: center;
padding: 7px 12px;
margin: 0;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
width: 470px;
box-sizing: border-box;
flex-shrink: 0;
}
/* Nav buttons on image */
.bg-lb-nav {
position: absolute;
top: 50%;
transform: translateY(-50%);
background: rgba(0, 0, 0, 0.55);
color: #fff;
border: none;
font-size: 34px;
width: 40px;
height: 40px;
border-radius: 50%;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
line-height: 1;
transition: background 0.15s;
padding: 0 0 2px;
}
.bg-lb-nav:hover {
background: rgba(0, 0, 0, 0.85);
}
.bg-lb-prev {
left: 8px;
}
.bg-lb-next {
right: 8px;
}
/* Counter — bottom LEFT inside image */
.bg-lb-counter {
position: absolute;
bottom: 10px;
left: 12px;
background: rgba(0, 0, 0, 0.6);
color: #fff;
font-size: 12px;
padding: 3px 10px;
border-radius: 20px;
white-space: nowrap;
backdrop-filter: blur(2px);
}
/* ─────────────────────────────────────────
Panel phải: thông tin cây
───────────────────────────────────────── */
.bg-lb-right {
flex: 1;
display: flex;
flex-direction: column;
overflow-y: auto;
padding: 0;
background: #fff;
gap: 5px;
min-width: 0;
padding-left: 20px;
}
.bg-lb-right-title {
font-size: 18px;
font-weight: 500;
text-transform: uppercase;
color: #000000;
margin: 0 0 2px;
line-height: 1.35;
letter-spacing: 0;
border-bottom: 0;
padding-bottom: 0;
}
.bg-lb-right-code {
font-size: 17px;
color: #00000099;
margin: 0;
font-style: italic;
letter-spacing: 0;
}
/* ─────────────────── Thông số kỹ thuật ─────────────────── */
.bg-lb-specs-wrap {
border-radius: 10px;
overflow: hidden;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
}
.bg-lb-specs-head {
background: #105029;
color: #fff;
font-size: 17px;
font-weight: 500;
padding: 10px 16px;
display: flex;
align-items: center;
gap: 8px;
letter-spacing: 0;
}
/* Grid: 2 columns for spec rows */
.bg-lb-specs-table {
display: grid;
grid-template-columns: 1fr;
}
.bg-lb-spec-row {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
padding: 6px 8px;
border-right: 1px solid #eee;
border-bottom: 1px solid #0000001A;
background: #EFEFEF;
}
/* .bg-lb-spec-row:nth-child(3n) {
border-right: none;
}
.bg-lb-spec-row:nth-last-child(-n+3) {
border-bottom: none;
}
.bg-lb-spec-row:nth-child(odd) {
background: #fff;
} */
.bg-lb-spec-label {
font-size: 17px;
color: #00000099;
font-weight: 400;
line-height: 1.3;
margin-bottom: 4px;
display: block;
}
.bg-lb-spec-value {
font-size: 17px;
font-weight: 800;
color: #105029;
display: block;
line-height: 1.2;
}
/* ─────────────────── Checklist ─────────────────── */
.bg-lb-checklist {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 5px;
margin-top: 15px;
margin-bottom: 10px;
}
.bg-lb-checklist li {
display: flex;
align-items: center;
gap: 8px;
font-size: 17px;
color: #000;
line-height: 1.4;
}
.bg-lb-checklist li svg {
flex-shrink: 0;
}
/* ─────────────────── CTA buttons ─────────────────── */
.bg-lb-cta {
display: flex;
align-items: center;
justify-content: center;
gap: 9px;
padding: 10px 16px;
border-radius: 10px;
font-size: 17px;
font-weight: 500;
text-decoration: none;
text-align: center;
letter-spacing: 0;
color: #fff;
transition: filter 0.15s, transform 0.1s;
border: none;
cursor: pointer;
}
.bg-lb-cta:hover {
filter: brightness(1.12);
color: #fff;
transform: translateY(-1px);
}
.bg-lb-cta:active {
transform: translateY(0);
}
.bg-lb-cta-call {
background: #AF0B0B;
box-shadow: 0 4px 14px rgba(192, 57, 43, 0.35);
}
.bg-lb-cta-zalo {
background: #AF0B0B;
box-shadow: 0 4px 14px rgba(192, 57, 43, 0.35);
}
/* ── Responsive: stack vertical on mobile ── */
@media (max-width: 700px) {
.bg-lb-box {
flex-direction: column;
width: 100vw;
max-width: 100vw;
max-height: 98vh;
border-radius: 10px 10px 0 0;
position: fixed;
bottom: 0;
left: 0;
}
.bg-lb[hidden] {
display: none !important;
}
.bg-lb-left {
flex: 0 0 auto;
flex-direction: column;
}
.bg-lb-thumbs-col {
width: 100%;
max-height: 80px;
flex-direction: row;
overflow-x: auto;
overflow-y: hidden;
padding: 8px 10px;
align-self: auto;
}
.bg-lb-t {
width: 55px;
height: 55px;
}
.bg-lb-img-col {
flex: 1;
}
.bg-lb-img-wrap {
width: 100% !important;
height: 38vh !important;
}
.bg-lb-main-img {
object-fit: contain;
}
.bg-lb-img-caption {
width: 100% !important;
}
.bg-lb-right {
padding: 16px 16px 20px;
flex: 1;
overflow-y: auto;
}
.bg-lb-right-title {
font-size: 14px;
}
.bg-lb-nav {
width: 34px;
height: 34px;
font-size: 24px;
}
.bg-row-main {
flex-wrap: wrap;
gap: 10px;
}
.bg-cta {
width: 100%;
justify-content: center;
}
.bg-tabs-wrap {
padding: 10px 14px 0;
}
.bg-row-main,
.bg-sub-list,
.bg-footer-bar {
padding-left: 14px;
padding-right: 14px;
}
.bg-sub-row {
gap: 8px;
}
}
/* ═══════════════════════════════════════════════════════
NEWSLETTER SECTION
═══════════════════════════════════════════════════════ */
.nl-section {
background: #fff;
max-width: 1230px;
margin-left: auto;
margin-right: auto;
box-sizing: border-box;
padding: 0;
}
/* inner container resets to avoid double-padding */
.nl-section .container {
max-width: 100%;
padding-left: 0;
padding-right: 0;
background: transparent;
}
/* Green rounded box inside nl-section */
.nl-box {
background: var(--primary-color);
border-top: none;
padding: 15px 100px;
color: #fff;
}
.nl-inner {
display: flex;
align-items: center;
gap: 30px;
}
.nl-text {
flex: 0 0 auto;
min-width: 220px;
}
.nl-heading {
font-size: 30px;
font-weight: 800;
margin: 0;
text-transform: uppercase;
}
/* Form */
.nl-form {
flex: 1;
display: flex;
flex-direction: column;
gap: 10px;
}
.nl-row-top {
display: flex;
gap: 10px;
}
.nl-row-bottom {
display: flex;
gap: 10px;
align-items: stretch;
}
.nl-field {
flex: 1;
display: flex;
align-items: center;
background: #fff;
border-radius: 24px;
padding: 0 16px;
gap: 8px;
height: 44px;
}
.nl-field-wide {
flex: 1;
}
.nl-icon {
flex-shrink: 0;
color: #aaa;
display: flex;
align-items: center;
}
.nl-field input {
flex: 1;
border: none;
outline: none;
background: transparent;
font-size: 14px;
color: #333;
height: 100%;
padding: 0;
min-width: 0;
}
.nl-field input::placeholder {
color: #aaa;
}
.nl-submit {
flex-shrink: 0;
background: #f6bf25;
color: #fff;
border: none;
border-radius: 24px;
padding: 0 28px;
height: 44px;
font-size: 15px;
font-weight: 500;
cursor: pointer;
white-space: nowrap;
transition: opacity 0.2s;
letter-spacing: 0.5px;
}
.nl-submit:hover {
opacity: 0.85;
}
/* ═══════════════════════════════════════════════════════
FOOTER TICKER BAR
═══════════════════════════════════════════════════════ */
.footer-ticker {
background: rgba(255, 158, 3, 0.15);
border-top: 1px solid var(--border-color);
border-bottom: 1px solid var(--border-color);
padding: 10px 0;
overflow: hidden;
max-width: 1230px;
margin-left: auto;
margin-right: auto;
box-sizing: border-box;
}
.footer-ticker-track {
display: flex;
white-space: nowrap;
animation: ft-scroll 28s linear infinite;
will-change: transform;
}
.footer-ticker:hover .footer-ticker-track {
animation-play-state: paused;
}
.ft-item {
display: inline-flex;
align-items: center;
gap: 8px;
font-size: 16px;
font-weight: 400;
color: #000;
flex-shrink: 0;
padding-right: 50px;
}
@keyframes ft-scroll {
0% {
transform: translateX(0);
}
100% {
transform: translateX(-50%);
}
}
/* ═══════════════════════════════════════════════════════
SITE FOOTER
═══════════════════════════════════════════════════════ */
.site-footer {
background: #fff;
padding: 0;
border-top: none;
max-width: 1230px;
margin-left: auto;
margin-right: auto;
box-sizing: border-box;
}
.site-footer>.container {
max-width: 100%;
padding: 15px 15px 0;
background: transparent;
}
/* --- 4-column grid --- */
.ft-grid {
display: grid;
grid-template-columns: 1.6fr 1.2fr 1.3fr 1fr;
gap: 15px;
padding-bottom: 15px;
border-bottom: 1px solid var(--border-color);
}
/* --- Brand column --- */
.ft-logo-link {
display: inline-block;
margin-bottom: 12px;
}
.ft-logo {
max-width: 300px;
height: auto;
display: block;
}
.ft-brand-name {
font-size: 14px;
font-weight: 500;
color: var(--primary-color);
margin: 0 0 8px;
line-height: 1.4;
}
.ft-brand-desc {
font-size: 16px;
color: #000;
line-height: 1.2;
margin: 0 0 14px;
}
/* --- Generic column --- */
.ft-col-title,
.footer-heading {
font-size: 20px;
font-weight: bold !important;
color: #AF0B0B;
text-transform: uppercase;
letter-spacing: 0;
margin: 0 0 15px;
padding-bottom: 0;
}
.ft-social-title {
margin-top: 18px;
font-size: 16px;
}
/* Address semantic tags */
.contact-address {
font-style: normal;
}
.contact-address a {
color: #000;
text-decoration: none;
transition: color 0.2s;
}
.contact-address a:hover {
color: var(--primary-color);
}
/* Info list (thông tin trụ sở) */
.ft-info-list {
list-style: none;
padding: 0;
margin: 0;
font-size: 16px;
color: #000;
line-height: 1.2;
}
.ft-info-list li {
margin-bottom: 8px;
}
.ft-info-list strong {
color: #000;
font-weight: 500;
}
/* Link list */
.ft-link-list {
list-style: none;
padding: 0;
margin: 0;
font-size: 16px;
}
.ft-link-list li {
margin-bottom: 7px;
}
.ft-link-list a {
color: #000;
text-decoration: none;
transition: color 0.2s;
}
.ft-link-list a:hover {
color: var(--primary-color);
}
/* --- Social icons --- */
.ft-social-icons {
display: flex;
gap: 8px;
flex-wrap: wrap;
}
.ft-social-btn {
display: flex;
align-items: center;
justify-content: center;
width: 34px;
height: 34px;
border-radius: 6px;
background: #f0f0f0;
color: #333;
transition: background 0.2s, color 0.2s;
text-decoration: none;
}
.ft-social-btn:hover {
background: var(--primary-color);
color: #fff;
}
/* --- Bottom bar --- */
.ft-bottom {
display: flex;
align-items: center;
justify-content: space-between;
padding: 10px 0;
font-size: 14px;
color: #00000099;
gap: 16px;
flex-wrap: wrap;
}
.ft-copyright {
margin: 0;
color: #666;
}
.ft-badges {
display: flex;
align-items: center;
gap: 8px;
}
.ft-badge-label {
font-size: 14px;
color: #00000099;
white-space: nowrap;
}
.ft-badge {
display: flex;
align-items: center;
text-decoration: none;
border-radius: 4px;
overflow: hidden;
opacity: 0.85;
transition: opacity 0.2s;
}
.ft-badge:hover {
opacity: 1;
}
.hungfarm-tab-content-inner ul {
list-style: none;
/* Xóa chấm mặc định */
padding: 0;
margin: 15px;
font-size: 17px;
line-height: 1.8;
color: #000;
}
.hungfarm-tab-content-inner li {
position: relative;
padding-left: 15px;
/* Khoảng cách từ dấu chấm đến chữ */
margin-bottom: 0;
}
.hungfarm-tab-content-inner li::before {
content: "";
position: relative;
left: 0;
top: 11px;
width: 10px;
height: 10px;
background-color: #105029;
border-radius: 50%;
display: inline-block;
float: left;
margin-right: 10px;
}
.aligncenter {
clear: both;
text-align: center;
width: 100% !important;
}
.aligncenter img {
margin: 0 auto;
}
.wp-caption-text {
margin-top: 5px;
font-size: 16px;
}
/* ═══════════════════════════════════════════════════════
RESPONSIVE — Newsletter & Footer
═══════════════════════════════════════════════════════ */
@media (max-width: 1024px) {
.ft-grid {
grid-template-columns: 1fr 1fr;
gap: 28px;
}
}
@media (max-width: 768px) {
.nl-inner {
flex-direction: column;
align-items: flex-start;
gap: 20px;
}
.nl-heading {
font-size: 20px;
}
.nl-row-top,
.nl-row-bottom {
flex-direction: column;
}
.nl-submit {
width: 100%;
justify-content: center;
}
.ft-grid {
grid-template-columns: 1fr;
gap: 24px;
}
.ft-bottom {
flex-direction: column;
align-items: flex-start;
gap: 12px;
}
}
/* ═══════════════════════════════════════════════════════
HUNGFARM VIDEO EMBED — Shortcode [hungfarm_video]
═══════════════════════════════════════════════════════ */
.hungfarm-video-embed {
max-width: 800px;
margin: 20px auto;
padding: 0;
border: none;
}
/* 16:9 ratio wrapper */
.hungfarm-video-ratio {
position: relative;
padding-top: 56.25%;
height: 0;
overflow: hidden;
border-radius: 8px 8px 0 0;
background: #000;
}
.hungfarm-video-ratio iframe,
.hungfarm-video-ratio video {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border: none;
}
.hungfarm-video-caption {
display: flex;
align-items: center;
gap: 8px;
background: #105029;
color: #fff;
font-size: 14px;
font-style: normal;
font-weight: 400;
padding: 8px 14px;
border-radius: 0 0 8px 8px;
margin-top: 0;
line-height: 1.4;
}
/* Monitor icon */
.hungfarm-video-caption::before {
content: '';
display: inline-block;
flex-shrink: 0;
width: 18px;
height: 18px;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='3' width='20' height='14' rx='2'/%3E%3Cpath d='M8 21h8M12 17v4'/%3E%3C/svg%3E");
background-size: contain;
background-repeat: no-repeat;
background-position: center;
opacity: .9;
}
.hungfarm-video-link {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
color: #fff;
background: #111;
text-decoration: underline;
font-size: 14px;
padding: 12px;
}
/* ═══════════════════════════════════════════════════════
HUNGFARM FEATURED PRODUCTS — [hungfarm_featured] Shortcode
═══════════════════════════════════════════════════════ */
.hungfarm-featured-block {
background: rgba(255, 158, 3, 0.15);
border-left: 10px solid #FF9E03;
border-radius: 0;
margin: 0;
padding: 10px 15px;
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;
}
/* Heading row */
.hungfarm-featured-heading {
display: flex;
align-items: center;
gap: 0;
font-size: 18px;
font-weight: 500;
text-transform: uppercase;
padding: 0 0 5px;
margin: 0;
}
.hungfarm-related-slider .woocommerce-loop-product__title {
padding: 0 15px !important;
font-size: 16px !important;
}
/* Hide old bar element — border is on .hungfarm-featured-block now */
.hungfarm-featured-bar {
display: none;
}
/* Slider wrapper — clips overflow */
.hungfarm-featured-slider-wrap {
position: relative;
overflow: hidden;
padding: 0;
}
/* Slider inner — flex row, translates on nav */
.hungfarm-featured-slider {
display: flex;
transition: transform .55s cubic-bezier(.4, 0, .2, 1);
will-change: transform;
}
/* Each slide card */
.hungfarm-featured-slide {
display: flex;
align-items: flex-start;
gap: 10px;
flex-shrink: 0;
box-sizing: border-box;
padding: 6px 40px 6px 0;
border-right: 1px solid #f0f0f0;
}
.hungfarm-tab-content-inner p,
.hungfarm-tab-content-inner h2,
.hungfarm-tab-content-inner h3,
.hungfarm-tab-content-inner h4 {
margin-bottom: 0px;
margin-top: 0;
}
.hungfarm-featured-slide:last-child {
border-right: none;
}
.hungfarm-featured-img-wrap {
flex-shrink: 0;
display: block;
}
.hungfarm-featured-img-wrap img {
width: 100px;
height: 100px;
object-fit: cover;
border-radius: 6px;
display: block;
}
.hungfarm-featured-body {
display: flex;
flex-direction: column;
gap: 8px;
flex: 1;
min-width: 0;
}
.hungfarm-featured-title {
font-size: 16px;
color: #000;
font-weight: 400;
line-height: 1.2;
margin: 0 !important;
text-transform: none;
height: 39px;
overflow: hidden;
}
/* "Xem bài" button */
.hungfarm-featured-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 7px;
background: #AF0B0B;
color: #fff !important;
text-decoration: none !important;
font-size: 16px;
font-weight: 500;
padding: 5px;
border-radius: 10px;
width: fit-content;
min-width: 110px;
transition: background .2s;
white-space: nowrap;
}
.hungfarm-featured-btn:hover {
background: #a00;
}
.hungfarm-featured-btn svg {
flex-shrink: 0;
}
/* Prev / Next buttons */
.hungfarm-fs-prev,
.hungfarm-fs-next {
position: absolute;
top: 50%;
transform: translateY(-50%);
background: rgba(21, 64, 49, .85);
color: #fff;
border: none;
border-radius: 50%;
width: 30px;
height: 30px;
font-size: 20px;
line-height: 1;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: background .2s;
z-index: 2;
padding: 0;
}
.hungfarm-fs-prev {
left: 2px;
transform: translateY(-50%) scaleX(-1);
}
.hungfarm-fs-next {
right: 2px;
}
.hungfarm-fs-prev:hover,
.hungfarm-fs-next:hover {
background: #105029;
}
/* Mobile: 1 slide */
@media (max-width: 639px) {
.hungfarm-featured-slide {
padding: 8px 0;
}
.hungfarm-featured-img-wrap img {
width: 80px;
height: 80px;
}
}
/* ─────────────────────────────────────────
Author Card — dmc_v2
───────────────────────────────────────── */
.dmc_v2_wrapper {
width: 100%;
padding: 0;
display: flex;
justify-content: center;
background-color: inherit;
box-sizing: border-box;
}
.dmc_v2_wrapper .dmc_v2_card {
background-color: #ededed;
border-radius: 20px;
padding: 30px;
max-width: 850px;
width: 100%;
display: flex;
align-items: center;
gap: 20px;
box-sizing: border-box;
}
.dmc_v2_wrapper .dmc_v2_avatar_wrap {
flex-shrink: 0;
}
.woocommerce .products ul,
.woocommerce ul.products {
margin: 0;
padding: 0;
list-style: none outside;
clear: both;
}
.dmc_v2_wrapper .dmc_v2_img {
width: 100px;
height: 100px;
border-radius: 50%;
object-fit: cover;
border: 1px solid #ffffff;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}
.dmc_v2_wrapper .dmc_v2_info {
flex-grow: 1;
}
.dmc_v2_wrapper .dmc_v2_role {
font-size: 16px;
color: #000;
margin-bottom: 4px;
display: inline-block;
}
.dmc_v2_wrapper .dmc_v2_name {
font-size: 16px;
color: #105029;
font-weight: 500;
text-transform: uppercase;
margin-bottom: 0;
letter-spacing: 0;
display: inline-block;
}
.dmc_v2_wrapper .dmc_v2_quote_container {
position: relative;
margin-bottom: 25px;
padding: 0 25px;
margin-top: 15px;
}
.dmc_v2_wrapper .dmc_v2_quote_mark {
font-size: 45px;
color: #b31217;
font-family: 'Georgia', serif;
position: absolute;
line-height: 1;
}
.dmc_v2_wrapper .dmc_v2_mark_open {
top: -15px;
left: -5px;
}
.dmc_v2_wrapper .dmc_v2_mark_close {
bottom: -35px;
right: -5px;
}
.dmc_v2_wrapper .dmc_v2_text {
font-style: italic;
color: #000;
line-height: 1.2;
font-size: 14px;
margin: 0;
}
.dmc_v2_wrapper .dmc_v2_btn_phone {
display: inline-flex;
align-items: center;
background-color: #b31217;
color: #ffffff !important;
text-decoration: none;
padding: 12px 25px;
border-radius: 10px;
font-weight: bold;
font-size: 18px;
gap: 12px;
transition: all 0.3s ease;
}
.dmc_v2_wrapper .dmc_v2_btn_phone:hover {
background-color: #8e0e12;
transform: translateY(-3px);
box-shadow: 0 5px 15px rgba(179, 18, 23, 0.3);
}
.dmc_v2_wrapper .dmc_v2_icon_svg {
width: 22px;
height: 22px;
fill: currentColor;
flex-shrink: 0;
}
@media (max-width: 768px) {
.dmc_v2_wrapper .dmc_v2_card {
flex-direction: column;
text-align: center;
padding: 30px 20px;
gap: 20px;
}
.dmc_v2_wrapper .dmc_v2_img {
width: 140px;
height: 140px;
}
.dmc_v2_wrapper .dmc_v2_mark_close {
bottom: -25px;
}
.woocommerce-tabs table.shop_attributes th,
.woocommerce-tabs .wc-tab table th {
width: 15% !important;
}
}
/* ═══════════════════════════════════════════════
HOME BANNER IMAGE — Trang Chủ
Max-width: 1230px, căn giữa, responsive
═══════════════════════════════════════════════ */
.home-banner-img {
width: 100vw;
position: relative;
left: 50%;
right: 50%;
margin-left: -50vw;
margin-right: -50vw;
margin-bottom: 0;
line-height: 0;
}
.home-banner-img__inner {
max-width: 1230px;
margin: 0 auto;
display: block;
line-height: 0;
}
.home-banner-img__inner a {
display: block;
line-height: 0;
}
.home-banner-img__img {
display: block;
width: 100%;
height: auto;
}
@media (max-width: 768px) {
.home-banner-img {
margin-bottom: 0;
}
}
/* ═══════════════════════════════════════════════
HOME PAGE CONTENT — Nội dung trang chủ
(Chỉnh sửa qua WP Editor)
═══════════════════════════════════════════════ */
.home-page-content {
padding: 30px 0 10px;
border-bottom: 1px solid var(--border-color);
margin-bottom: 30px;
}
.home-page-content h1 {
font-size: 29px;
font-weight: 500;
color: var(--primary-color);
text-align: center;
text-transform: uppercase;
margin: 0;
line-height: 1.2;
}
.home-page-content h2 {
font-size: 26px;
font-weight: 500;
color: var(--primary-color);
text-align: center;
text-transform: uppercase;
margin: 0;
line-height: 1.2;
}
.home-page-content h3 {
font-size: 23px;
font-weight: 500;
color: var(--primary-color);
margin: 0;
}
.home-page-content p {
font-size: 16px;
line-height: 1.7;
color: #000;
margin: 0 0 10px;
}
.home-page-content blockquote,
.home-page-content .wp-block-quote {
border-left: 5px solid #FF9E03;
background: rgba(255, 158, 3, 0.15);
padding: 16px 20px;
margin: 0 0 16px;
border-radius: 0 4px 4px 0;
}
.home-page-content blockquote {
margin-top: 15px;
}
.home-page-content blockquote p,
.home-page-content .wp-block-quote p {
margin: 0 0 8px;
font-size: 16px;
color: #000;
line-height: 1.2;
}
.home-page-content blockquote p:last-child,
.home-page-content .wp-block-quote p:last-child {
margin: 0;
}
.home-page-content blockquote cite,
.home-page-content blockquote strong {
font-weight: 500;
color: var(--primary-color);
}
@media (max-width: 768px) {
.home-page-content {
padding: 20px 0 10px;
}
.home-page-content h1,
.home-page-content h2 {
font-size: 20px;
}
}
/* ═══════════════════════════════════════════════
DỊCH VỤ NỔI BẬT — hungfarm-services-section
═══════════════════════════════════════════════ */
.hungfarm-services-section {
padding: 30px 0 20px;
border-bottom: 1px solid var(--border-color);
margin-bottom: 30px;
}
/* Heading với thanh đỏ bên trái */
.hungfarm-services-heading {
display: flex;
align-items: center;
gap: 12px;
font-size: 28px;
font-weight: 500;
color: #105029;
text-transform: uppercase;
margin: 0 0 20px;
line-height: 1.2;
}
.hungfarm-services-heading__bar {
display: inline-block;
width: 64px;
min-width: 6px;
height: 32px;
background: var(--danger-color);
border-radius: 2px;
flex-shrink: 0;
}
/* Grid 3 cột × 2 hàng */
.hungfarm-services-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
margin-bottom: 30px;
}
.hungfarm-svc-card__img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: transform 0.4s ease;
}
.hungfarm-svc-card:hover .hungfarm-svc-card__img {
transform: scale(1.05);
}
/* Placeholder khi chưa có ảnh */
.hungfarm-svc-card__placeholder {
width: 100%;
height: 100%;
background: linear-gradient(135deg, #c8dbc8 0%, #a0c0a0 100%);
}
/* Overlay chứa tiêu đề — dải đen mờ cuối card */
.hungfarm-svc-card__overlay {
position: absolute;
bottom: 15px;
left: 15px;
right: 15px;
height: 50px;
background: rgba(239, 241, 239, 0.90);
border-radius: 4px;
display: flex;
align-items: center;
justify-content: center;
transition: background 0.3s;
}
.hungfarm-svc-card__title {
color: #105029;
font-size: 16px;
font-weight: 500;
line-height: 1.3;
}
/* Nút CTA */
.hungfarm-services-cta {
text-align: center;
margin-top: 30px;
margin-bottom: 20px;
}
.hungfarm-services-cta__btn {
display: inline-flex;
align-items: center;
gap: 8px;
background: #FF9E03;
color: #fff !important;
font-size: 15px;
font-weight: 500;
padding: 12px 36px;
border-radius: 4px;
text-decoration: none;
transition: opacity background 0.2s, transform 0.2s;
text-transform: uppercase;
}
.woocommerce div.product div.images.woocommerce-product-gallery {
position: relative;
width: 100% !important;
}
/* ═══════════════════════════════════════════════
BANNER GIỬA TRANG — hungfarm-mid-banner
Ảnh thực (img tag), max-width 1230px, căn giữa
═══════════════════════════════════════════════ */
.hungfarm-mid-banner {
display: block;
width: 100%;
max-width: 1230px;
margin: 0 auto 0;
border-bottom: 3px solid var(--danger-color, #AF0B0B);
overflow: hidden;
line-height: 0;
/* xóa khoảng trắng dưới img */
}
/* Link wrapper */
.hungfarm-mid-banner a {
display: block;
line-height: 0;
}
/* Ảnh banner */
.hungfarm-mid-banner__img {
width: 100%;
height: auto;
display: block;
object-fit: cover;
}
/* Fallback khi chưa có ảnh */
.hungfarm-mid-banner--empty {
min-height: 80px;
background: #105029;
}
/* Responsive */
@media (max-width: 768px) {
.hungfarm-services-grid {
grid-template-columns: repeat(2, 1fr);
gap: 8px;
}
.hungfarm-services-heading {
font-size: 18px;
}
.hungfarm-svc-card__title {
font-size: 14px;
}
}
@media (max-width: 480px) {
.hungfarm-services-grid {
grid-template-columns: 1fr;
}
}
/* ═══════════════════════════════════════════════
TOP CÂY NỔI BẬT — hungfarm-top-trees-section
═══════════════════════════════════════════════ */
.hungfarm-top-trees-section {
padding: 30px 0 20px;
border-bottom: 1px solid var(--border-color);
margin-bottom: 30px;
}
/* Heading */
.hungfarm-top-trees-heading {
display: flex;
align-items: center;
gap: 12px;
font-size: 26px;
font-weight: 500;
color: #105029;
text-transform: uppercase;
margin: 0 0 20px;
line-height: 1.2;
}
.hungfarm-top-trees-heading__bar {
display: inline-block;
width: 64px;
min-width: 6px;
height: 32px;
background: var(--danger-color);
border-radius: 2px;
flex-shrink: 0;
}
/* Grid — 5 cột cho 8sp, 4 cột cho 12sp (2 hàng 6) */
.hungfarm-top-trees-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 10px;
margin-bottom: 30px;
}
.hungfarm-top-trees-grid--8 {
grid-template-columns: repeat(5, 1fr);
}
.hungfarm-top-trees-grid--12 {
grid-template-columns: repeat(6, 1fr);
}
/* Card */
.hungfarm-tt-card {
background: #fff;
border: 1px solid #ececec;
border-radius: 6px;
padding: 0;
display: flex;
flex-direction: column;
gap: 0;
transition: box-shadow 0.3s ease;
box-sizing: border-box;
overflow: hidden;
}
.hungfarm-tt-card:hover {
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
}
/* Vùng ảnh + badge */
.hungfarm-tt-card__img-wrap {
position: relative;
display: block;
overflow: hidden;
border-radius: 0;
aspect-ratio: 1 / 1;
background: #fafafa;
}
/* Link bọc ảnh - full size */
.hungfarm-tt-card__img-link {
display: block;
width: 100%;
height: 100%;
}
.hungfarm-tt-card__img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: transform 0.35s ease;
}
.hungfarm-tt-card:hover .hungfarm-tt-card__img {
transform: scale(1.05);
}
.hungfarm-tt-card__badge {
display: none;
}
.hungfarm-tt-card__badge--below {
background: #105029;
border: none;
color: #fff !important;
font-size: 14.5px;
font-weight: 600;
padding: 10px 12px;
border-radius: 6px;
display: flex;
align-items: center;
justify-content: center;
gap: 6px;
text-transform: none;
margin: auto 12px 12px 12px;
margin: 0 auto;
width: 86%;
}
.hungfarm-tt-card__badge--below:hover {
background: #193a1c;
color: #fff !important;
text-decoration: none !important;
}
.hungfarm-tt-card__stars {
color: #ffb700;
font-size: 13px;
text-align: center;
line-height: 1;
margin: 4px 0 0;
display: block;
}
.hungfarm-tt-card__name {
font-family: 'Roboto', sans-serif;
font-size: 16px !important;
font-weight: 600;
color: var(--primary-color, #105029);
padding: 12px 12px 5px !important;
margin: 0;
line-height: 1.4;
text-transform: none;
text-align: left;
}
.hungfarm-tt-card__name a {
color: inherit;
text-decoration: none;
}
.hungfarm-tt-card__price {
font-size: 15px;
font-weight: bold;
color: var(--danger-color, #e54c78);
padding: 0 12px 10px;
text-align: left;
margin-top: auto;
margin-bottom: 0;
}
.hungfarm-tt-card__price del {
color: #a0a0a0;
font-size: 13px;
margin-right: 5px;
}
.hungfarm-tt-card__price ins {
text-decoration: none;
}
/* Nút XEM THÊM */
.hungfarm-top-trees-cta {
text-align: center;
margin-top: 10px;
}
.hungfarm-top-trees-cta__btn {
display: inline-flex;
align-items: center;
gap: 6px;
background: #FF9E03;
color: #fff !important;
font-size: 16px;
font-weight: 500;
padding: 10px 28px;
border-radius: 4px;
text-decoration: none;
text-transform: uppercase;
letter-spacing: 0;
transition: opacity 0.2s, transform 0.2s;
}
.hungfarm-top-trees-cta__btn:hover {
opacity: 0.88;
transform: translateY(-1px);
color: #fff !important;
}
/* Responsive */
@media (max-width: 1024px) {
.hungfarm-top-trees-grid--8 {
grid-template-columns: repeat(4, 1fr);
}
.hungfarm-top-trees-grid--12 {
grid-template-columns: repeat(4, 1fr);
}
}
@media (max-width: 768px) {
.hungfarm-top-trees-grid--8,
.hungfarm-top-trees-grid--12 {
grid-template-columns: repeat(3, 1fr);
gap: 8px;
}
.hungfarm-top-trees-heading {
font-size: 18px;
}
}
@media (max-width: 480px) {
.hungfarm-top-trees-grid--8,
.hungfarm-top-trees-grid--12 {
grid-template-columns: repeat(2, 1fr);
}
}
/* ── Archive: Grid 5 cột giống front-page ── */
.hungfarm-archive-grid {
grid-template-columns: repeat(4, 1fr);
}
.hungfarm-archive-grid .hungfarm-tt-card__name a {
color: #105029;
text-decoration: none;
}
.hungfarm-archive-grid .hungfarm-tt-card__name a:hover {
color: var(--accent-color);
}
/* hungfarm-top-trees-grid--10 (archive dùng) */
.hungfarm-top-trees-grid--10 {
grid-template-columns: repeat(5, 1fr);
}
@media (max-width: 1100px) {
.hungfarm-archive-grid,
.hungfarm-top-trees-grid--10 {
grid-template-columns: repeat(4, 1fr);
}
}
@media (max-width: 768px) {
.hungfarm-archive-grid,
.hungfarm-top-trees-grid--10 {
grid-template-columns: repeat(3, 1fr);
gap: 8px;
}
}
@media (max-width: 540px) {
.hungfarm-archive-grid,
.hungfarm-top-trees-grid--10 {
grid-template-columns: repeat(2, 1fr);
}
}
/* ═══════════════════════════════════════════════
SẢN PHẨM THEO TAB — hungfarm-ptabs-section
═══════════════════════════════════════════════ */
.hungfarm-ptabs-section {
padding: 0 0 20px;
margin-bottom: 30px;
}
/* Grid 5 cột cho tab 10 SP */
.hungfarm-top-trees-grid--10 {
grid-template-columns: repeat(5, 1fr);
}
/* Tab nav bar — nền xám nhạt, border-bottom đỏ trực tiếp */
.hungfarm-ptabs-nav {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
gap: 12px;
margin-bottom: 30px;
padding: 0;
background: none;
border-radius: 0;
width: 100%;
border-bottom: none;
box-sizing: border-box;
margin-bottom: 18px;
}
.hungfarm-ptabs-btn {
padding: 10px 20px;
font-size: 17px;
font-weight: 500;
color: #000000;
background: #fff;
border: 1px solid #ccc;
border-radius: 30px;
cursor: pointer;
white-space: nowrap;
transition: background 0.18s, color 0.18s, border-color 0.18s;
line-height: 1.2;
}
.hungfarm-ptabs-btn:hover {
background: #208d45;
color: #fff;
border-color: #208d45;
}
.hungfarm-ptabs-btn.is-active {
background: #208d45;
color: #fff;
border-color: #208d45;
}
/* Tab panels — không có border (dường đỏ đã nằm trên nav) */
.hungfarm-ptabs-panel {
display: none;
margin-top: 0;
padding-top: 0;
}
.hungfarm-ptabs-panel.is-active {
display: block;
}
/* Empty state */
.hungfarm-ptabs-empty {
color: #888;
font-size: 14px;
padding: 20px 0;
text-align: center;
}
/* Nút Xem Danh Mục */
.hungfarm-ptabs-cta {
text-align: center;
margin-top: 16px;
}
.hungfarm-ptabs-cta__btn {
display: inline-flex;
align-items: center;
gap: 6px;
background: #FF9E03;
color: #fff !important;
font-size: 16px;
font-weight: 500;
padding: 10px 28px;
border-radius: 4px;
text-decoration: none;
text-transform: uppercase;
letter-spacing: 0;
transition: opacity 0.2s, transform 0.2s;
}
.hungfarm-ptabs-cta__btn:hover {
opacity: 0.88;
transform: translateY(-1px);
color: #fff !important;
}
/* Responsive */
@media (max-width: 1024px) {
.hungfarm-top-trees-grid--10 {
grid-template-columns: repeat(4, 1fr);
}
}
@media (max-width: 768px) {
.hungfarm-top-trees-grid--10 {
grid-template-columns: repeat(3, 1fr);
}
.hungfarm-ptabs-nav {
width: 100%;
}
}
@media (max-width: 480px) {
.hungfarm-top-trees-grid--10 {
grid-template-columns: repeat(2, 1fr);
}
}
/* ─────────────────────────────────────────────
TAB SWITCHING — Inline script (added via wp_footer)
CSS-only fallback: panels hidden by default
───────────────────────────────────────────── */
/* ═══════════════════════════════════════════════
CÁC DỰ ÁN TIÊU BIỂU — hungfarm-posts-section
═══════════════════════════════════════════════ */
.hungfarm-posts-section {
padding: 0;
margin-bottom: 0;
}
/* Grid 3 cột (mặc định) */
.hungfarm-pn-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
margin-bottom: 20px;
}
.hungfarm-pn-card {
border: 0;
border-radius: 10px;
overflow: hidden;
background: #fff;
transition: box-shadow 0.2s;
display: flex;
flex-direction: column;
}
/* Ảnh card */
.hungfarm-pn-card__img-wrap {
display: block;
overflow: hidden;
aspect-ratio: 16 / 9;
background: #e0e8e0;
}
.hungfarm-pn-card__img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: transform 0.35s ease;
}
.hungfarm-pn-card__img-wrap:hover .hungfarm-pn-card__img {
transform: scale(1.05);
}
/* Placeholder khi không có ảnh */
.hungfarm-pn-card__img-placeholder {
width: 100%;
height: 100%;
background: linear-gradient(135deg, #c8dbc8, #a0c0a0);
min-height: 180px;
}
.hungfarm-pn-card__body {
padding: 14px 0px 16px;
flex: 1;
display: flex;
flex-direction: column;
gap: 8px;
}
.hungfarm-pn-card__title {
font-size: 15px;
font-weight: 500;
margin: 0;
line-height: 1.4;
}
.hungfarm-pn-card__title a {
color: #105029;
text-decoration: none;
transition: color 0.18s;
font-size: 20px;
}
.hungfarm-pn-card__title a:hover {
color: var(--primary-color, #105029);
}
.hungfarm-pn-card__excerpt {
font-size: 17px;
color: #000000;
line-height: 1.2;
margin: 0;
}
/* Nút CTA */
.hungfarm-pn-cta {
text-align: center;
margin-top: 6px;
}
.hungfarm-pn-cta__btn {
display: inline-flex;
align-items: center;
gap: 6px;
background: #208d45;
color: #fff !important;
font-size: 14px;
font-weight: 500;
padding: 10px 28px;
border-radius: 10px;
text-decoration: none;
text-transform: uppercase;
letter-spacing: 0.4px;
transition: opacity 0.18s, transform 0.18s;
}
.hungfarm-pn-cta__btn:hover {
opacity: 0.88;
transform: translateY(-1px);
color: #fff !important;
}
/* Panel không có tabs — xóa border-top */
.hungfarm-pn-panel.hungfarm-pn-notab {
border-top: none;
padding-top: 0;
}
/* Responsive */
@media (max-width: 768px) {
.hungfarm-pn-grid {
grid-template-columns: repeat(2, 1fr);
gap: 14px;
}
}
@media (max-width: 480px) {
.hungfarm-pn-grid {
grid-template-columns: 1fr;
}
}
/* ═══════════════════════════════════════════════
PHẢN HỒI KHÁCH HÀNG — hungfarm-reviews-section
═══════════════════════════════════════════════ */
.hungfarm-reviews-section {
padding: 30px 0 20px;
margin-bottom: 30px;
}
.hungfarm-reviews-intro {
margin-bottom: 20px;
}
.hungfarm-reviews-quote {
margin: 0 0 8px;
padding: 0;
border: none;
font-size: 15px;
font-style: italic;
color: #333;
display: flex;
align-items: flex-start;
gap: 6px;
}
.hungfarm-reviews-quote__icon {
color: var(--danger-color, #AF0B0B);
font-size: 22px;
line-height: 1;
flex-shrink: 0;
font-style: normal;
}
.hungfarm-reviews-intro__text {
margin: 0;
font-size: 14px;
color: #555;
line-height: 1.65;
}
.hungfarm-reviews-slider {
overflow: hidden;
}
.hungfarm-reviews-page {
display: none;
}
.hungfarm-reviews-page.is-active {
display: block;
}
.hungfarm-reviews-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 14px;
}
.hungfarm-review-card {
display: flex;
align-items: flex-start;
gap: 12px;
background: #fff;
border: 1px solid #e2e8df;
border-radius: 6px;
padding: 14px;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
transition: box-shadow 0.2s;
}
.hungfarm-review-card:hover {
box-shadow: 0 3px 10px rgba(0, 0, 0, 0.10);
}
.hungfarm-review-card__avatar-wrap {
flex-shrink: 0;
}
.hungfarm-review-card__avatar {
width: 52px;
height: 52px;
border-radius: 50%;
object-fit: cover;
display: block;
}
.hungfarm-review-card__avatar-placeholder {
width: 52px;
height: 52px;
border-radius: 50%;
background: #dbe8d8;
color: #6a9c6a;
display: flex;
align-items: center;
justify-content: center;
}
.hungfarm-review-card__body {
flex: 1;
min-width: 0;
}
.hungfarm-review-card__name {
margin: 0 0 3px;
font-size: 13px;
font-weight: 500;
color: #105029;
line-height: 1.3;
}
.hungfarm-review-card__role {
font-weight: 400;
color: #666;
}
.hungfarm-review-card__stars {
color: #f5a623;
font-size: 13px;
margin-bottom: 5px;
letter-spacing: 1px;
}
.hungfarm-review-card__text {
margin: 0;
font-size: 13px;
color: #444;
line-height: 1.6;
}
.hungfarm-reviews-dots {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
margin-top: 18px;
}
.hungfarm-reviews-dot {
width: 10px;
height: 10px;
border-radius: 50%;
border: none;
background: #ccc;
cursor: pointer;
padding: 0;
transition: background 0.2s, transform 0.2s;
}
.hungfarm-reviews-dot.is-active {
background: var(--danger-color, #AF0B0B);
transform: scale(1.2);
}
@media (max-width: 640px) {
.hungfarm-reviews-grid {
grid-template-columns: 1fr;
}
}
/* ═══════════════════════════════════════════════
PHẢN HỒI KHÁCH HÀNG — hungfarm-reviews-section
═══════════════════════════════════════════════ */
.hungfarm-reviews-section {
padding: 30px 0 20px;
margin-bottom: 30px;
}
.hungfarm-reviews-intro {
margin-bottom: 20px;
}
.hungfarm-reviews-quote {
margin: 0 0 8px;
padding: 0;
border: none;
font-size: 17px;
font-style: italic;
color: #105029;
display: flex;
align-items: flex-start;
gap: 6px;
font-weight: bold;
}
.hungfarm-reviews-quote__icon {
color: #105029;
font-size: 22px;
line-height: 1;
flex-shrink: 0;
font-style: normal;
margin-top: -4px;
}
.hungfarm-reviews-intro__text {
margin: 0;
font-size: 17px;
color: #000;
line-height: 1.2;
}
.hungfarm-reviews-slider {
overflow: hidden;
}
.hungfarm-reviews-page {
display: none;
}
.hungfarm-reviews-page.is-active {
display: block;
}
.hungfarm-reviews-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 14px;
}
.hungfarm-review-card {
display: flex;
align-items: flex-start;
gap: 12px;
background: #fff;
border: 1px solid #e2e8df;
border-radius: 6px;
padding: 14px;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
transition: box-shadow 0.2s;
background: #EFEFEF;
}
.hungfarm-review-card:hover {
box-shadow: 0 3px 10px rgba(0, 0, 0, 0.10);
}
.hungfarm-review-card__avatar-wrap {
flex-shrink: 0;
}
.hungfarm-review-card__avatar {
width: 70px;
height: 70px;
border-radius: 50%;
object-fit: cover;
display: block;
}
.hungfarm-review-card__avatar-placeholder {
width: 70px;
height: 70px;
border-radius: 50%;
background: #EFEFEF;
color: #105029;
display: flex;
align-items: center;
justify-content: center;
}
.hungfarm-review-card__body {
flex: 1;
min-width: 0;
}
.hungfarm-review-card__name {
margin: 0 0 8px;
font-size: 17px;
font-weight: 500;
color: #000000;
line-height: 1.2;
}
.hungfarm-review-card__role {
font-weight: 500;
color: #000000;
}
.hungfarm-review-card__stars {
color: #f5a623;
font-size: 13px;
margin-bottom: 5px;
letter-spacing: 1px;
display: none;
}
.hungfarm-review-card__text {
margin: 0;
font-size: 17px;
color: #000000;
line-height: 1.2;
font-style: italic;
}
.hungfarm-reviews-dots {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
margin-top: 18px;
}
.hungfarm-reviews-dot {
width: 80px;
height: 10px;
border-radius: 0;
border: none;
background: #D9D9D9;
cursor: pointer;
padding: 0;
transition: background 0.2s, transform 0.2s;
margin: 0px 5px;
}
.hungfarm-reviews-dot.is-active {
background: #FF9E03;
transform: scale(1.2);
}
@media (max-width: 640px) {
.hungfarm-reviews-grid {
grid-template-columns: 1fr;
}
}
/* ═══════════════════════════════════════════════
TIN TỨC CÂY XANH — hungfarm-news-section
═══════════════════════════════════════════════ */
.hungfarm-news-section {
padding: 30px 0 10px;
margin-bottom: 30px;
}
/* Grid: 2 lớn (hàng 1) + 3 nhỏ (hàng 2) */
.hungfarm-news-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: auto auto;
gap: 10px;
}
/* 2 card lớn hàng trên: mỗi card chiếm 1.5 cột */
.hungfarm-news-card--big:nth-child(1) {
grid-column: 1 / 2;
}
.hungfarm-news-card--big:nth-child(2) {
grid-column: 2 / 4;
}
/* 3 card nhỏ hàng dưới: tự fill vào hàng 2 */
.hungfarm-news-card--sm {
grid-column: span 1;
}
/* Card base */
.hungfarm-news-card {
position: relative;
overflow: hidden;
border-radius: 4px;
background-color: #105029;
background-size: cover;
background-position: center center;
background-repeat: no-repeat;
}
.hungfarm-news-card--big {
min-height: 240px;
}
.hungfarm-news-card--sm {
min-height: 150px;
}
/* Link fills entire card */
.hungfarm-news-card__link {
display: block;
width: 100%;
height: 100%;
min-height: inherit;
text-decoration: none;
position: relative;
}
/* Overlay gradient at bottom */
.hungfarm-news-card__overlay {
position: absolute;
bottom: 0;
left: 0;
right: 0;
padding: 28px 14px 12px;
background: linear-gradient(to top, rgba(0, 0, 0, 0.80) 0%, rgba(0, 0, 0, 0) 100%);
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 10px;
min-height: 80px;
}
/* Title */
.hungfarm-news-card__title {
margin: 0;
font-size: 14px;
font-weight: 600;
color: #fff;
line-height: 1.4;
flex: 1;
}
.hungfarm-news-card--big .hungfarm-news-card__title {
font-size: 15px;
}
/* Arrow icon */
.hungfarm-news-card__arrow {
flex-shrink: 0;
display: inline-flex;
align-items: center;
justify-content: center;
width: 30px;
height: 30px;
color: #fff;
font-size: 17px;
transition: background 0.2s, transform 0.2s;
}
/* CTA button — vàng */
.hungfarm-news-cta {
text-align: center;
margin-top: 20px;
margin-bottom: 10px;
}
.hungfarm-news-cta__btn {
display: inline-block;
padding: 12px 36px;
background: #FF9E03;
color: #fff;
font-size: 14px;
font-weight: 500;
text-decoration: none;
border-radius: 3px;
letter-spacing: 0.5px;
transition: background 0.2s, transform 0.15s;
text-transform: uppercase;
}
.hungfarm-news-cta__btn:hover {
background: #AF0B0B;
transform: translateY(-1px);
}
/* Responsive */
@media (max-width: 768px) {
.hungfarm-news-grid {
grid-template-columns: repeat(2, 1fr);
}
.hungfarm-news-card--big:nth-child(1) {
grid-column: 1 / 2;
}
.hungfarm-news-card--big:nth-child(2) {
grid-column: 2 / 3;
}
.hungfarm-news-card--sm {
grid-column: span 1;
}
.hungfarm-news-card--big {
min-height: 180px;
}
}
@media (max-width: 480px) {
.hungfarm-news-grid {
grid-template-columns: 1fr;
}
.hungfarm-news-card--big:nth-child(1),
.hungfarm-news-card--big:nth-child(2) {
grid-column: 1;
}
.hungfarm-news-card--big {
min-height: 200px;
}
.hungfarm-news-card--sm {
min-height: 140px;
}
}
/* ═══════════════════════════════════════════════
TIN TỨC — FIX layout 50/50 + heights + green overlay
═══════════════════════════════════════════════ */
/* Grid: 6 cột ẩn để chia đều: big=3/6=50%, sm=2/6=33% */
.hungfarm-news-grid {
display: grid;
grid-template-columns: repeat(6, 1fr);
gap: 15px;
}
/* 2 card lớn: mỗi cái 50% */
.hungfarm-news-card--big {
grid-column: span 3;
height: 395px;
min-height: unset;
}
/* 3 card nhỏ: mỗi cái 33% */
.hungfarm-news-card--sm {
grid-column: span 2;
height: 280px;
min-height: unset;
}
.hungfarm-news-card {
border-radius: 30px;
overflow: hidden;
background-size: cover;
background-position: center center;
background-repeat: no-repeat;
background-color: #105029;
position: relative;
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
}
/* Link cover full card */
.hungfarm-news-card__link {
display: block;
width: 100%;
height: 100%;
position: absolute;
inset: 0;
text-decoration: none;
}
/* Overlay: nền XANH đặc ở dưới cùng */
.hungfarm-news-card__overlay {
position: absolute;
bottom: 0;
left: 0;
right: 0;
padding: 10px 12px;
background: rgba(21, 64, 49, 1);
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
min-height: unset;
}
/* Title text */
.hungfarm-news-card__title {
margin: 0;
font-size: 17px;
font-weight: 400;
color: #fff;
line-height: 1.2;
flex: 1;
}
.hungfarm-news-card--big .hungfarm-news-card__title {
font-size: 17px;
}
/* Arrow icon */
.hungfarm-news-card__arrow {
flex-shrink: 0;
display: inline-flex;
align-items: center;
justify-content: center;
width: 28px;
height: 28px;
color: #fff;
font-size: 28px;
transition: background 0.2s;
}
/* Responsive */
@media (max-width: 860px) {
.hungfarm-news-grid {
grid-template-columns: repeat(2, 1fr);
}
.hungfarm-news-card--big {
grid-column: span 1;
height: 240px;
}
.hungfarm-news-card--sm {
grid-column: span 1;
height: 180px;
}
}
@media (max-width: 540px) {
.hungfarm-news-grid {
grid-template-columns: 1fr;
}
.hungfarm-news-card--big,
.hungfarm-news-card--sm {
grid-column: 1;
height: 200px;
}
}
/* ═══ NEWS GRID FINAL FIX ═══ */
.hungfarm-news-grid {
display: grid !important;
grid-template-columns: repeat(6, 1fr) !important;
grid-template-rows: 395px 280px !important;
gap: 15px !important;
}
/* Row 1: 2 card lớn 50/50 */
.hungfarm-news-card--big:nth-child(1) {
grid-column: 1 / 4 !important;
grid-row: 1 !important;
height: 395px !important;
}
.hungfarm-news-card--big:nth-child(2) {
grid-column: 4 / 7 !important;
grid-row: 1 !important;
height: 395px !important;
}
/* Row 2: 3 card nhỏ ~33% */
.hungfarm-news-card--sm:nth-child(3) {
grid-column: 1 / 3 !important;
grid-row: 2 !important;
height: 280px !important;
}
.hungfarm-news-card--sm:nth-child(4) {
grid-column: 3 / 5 !important;
grid-row: 2 !important;
height: 280px !important;
}
.hungfarm-news-card--sm:nth-child(5) {
grid-column: 5 / 7 !important;
grid-row: 2 !important;
height: 280px !important;
}
/* Card uses height, not min-height */
.hungfarm-news-card {
min-height: unset !important;
}
.hungfarm-news-card__link {
position: absolute !important;
inset: 0 !important;
display: block !important;
text-decoration: none !important;
}
/* Responsive override */
@media (max-width: 860px) {
.hungfarm-news-grid {
grid-template-columns: 1fr 1fr !important;
grid-template-rows: auto !important;
}
.hungfarm-news-card--big:nth-child(1),
.hungfarm-news-card--big:nth-child(2) {
grid-column: span 1 !important;
grid-row: auto !important;
height: 230px !important;
}
.hungfarm-news-card--sm:nth-child(3),
.hungfarm-news-card--sm:nth-child(4),
.hungfarm-news-card--sm:nth-child(5) {
grid-column: span 1 !important;
grid-row: auto !important;
height: 170px !important;
}
}
@media (max-width: 540px) {
.hungfarm-news-grid {
grid-template-columns: 1fr !important;
grid-template-rows: auto !important;
}
.hungfarm-news-card--big:nth-child(1),
.hungfarm-news-card--big:nth-child(2),
.hungfarm-news-card--sm:nth-child(3),
.hungfarm-news-card--sm:nth-child(4),
.hungfarm-news-card--sm:nth-child(5) {
grid-column: 1 !important;
grid-row: auto !important;
height: 200px !important;
}
}
/* ═══════════════════════════════════════════════
ĐỐI TÁC - BÁO CHÍ — hungfarm-partners-section
═══════════════════════════════════════════════ */
.hungfarm-partners-section {
padding: 0;
margin-bottom: 0px;
border-bottom: 2px solid #e8ece6;
padding-bottom: 30px;
}
/* Wrap: flex với 2 nút prev/next */
.hungfarm-partners-wrap {
display: flex;
align-items: center;
gap: 8px;
position: relative;
}
/* Viewport: overflow hidden */
.hungfarm-partners-viewport {
flex: 1;
overflow: hidden;
}
/* Track: hàng ngang logo */
.hungfarm-partners-track {
display: flex;
gap: 10px;
transition: transform 0.35s ease;
will-change: transform;
}
/* Từng item */
.hungfarm-partner-item {
flex: 0 0 auto;
width: 150px;
}
/* Logo box */
.hungfarm-partner-logo {
display: flex;
align-items: center;
justify-content: center;
height: 72px;
padding: 8px 10px;
border: 1px solid #dde8d9;
border-radius: 4px;
background: #fff;
text-decoration: none;
transition: border-color 0.2s, box-shadow 0.2s;
overflow: hidden;
box-shadow: 3px 3px 3px 0px #00000026;
}
.hungfarm-partner-logo:hover {
border-color: #105029;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.10);
}
.hungfarm-partner-logo__img {
max-width: 100%;
max-height: 56px;
object-fit: contain;
display: block;
filter: grayscale(20%);
transition: filter 0.2s;
}
.hungfarm-partner-logo:hover .hungfarm-partner-logo__img {
filter: grayscale(0%);
}
/* Text placeholder khi chưa có ảnh */
.hungfarm-partner-logo__text {
font-size: 11px;
font-weight: 500;
color: #105029;
text-align: center;
line-height: 1.3;
text-transform: uppercase;
letter-spacing: 0.3px;
}
/* Nút prev/next */
.hungfarm-partners-btn {
flex-shrink: 0;
width: 32px;
height: 32px;
border-radius: 50%;
border: 1px solid #ccc;
background: #fff;
cursor: pointer;
font-size: 14px;
color: #333;
display: flex;
align-items: center;
justify-content: center;
transition: background 0.2s, border-color 0.2s;
line-height: 1;
padding: 0;
}
.hungfarm-partners-btn:hover {
background: var(--danger-color, #AF0B0B);
border-color: var(--danger-color, #AF0B0B);
color: #fff;
}
@media (max-width: 600px) {
.hungfarm-partner-item {
width: 120px;
}
.hungfarm-partner-logo {
height: 58px;
}
}
/* ═══ FIX: Horizontal scroll từ partners carousel ═══ */
/* Chặn overflow toàn trang */
html,
body {
overflow-x: hidden !important;
}
/* Đảm bảo section không tràn */
.hungfarm-partners-section {
overflow: hidden;
}
.hungfarm-partners-wrap {
overflow: hidden;
max-width: 100%;
}
/* Viewport ẩn phần tràn của track */
.hungfarm-partners-viewport {
overflow: hidden !important;
max-width: 100%;
flex: 1 1 0;
min-width: 0;
}
/* Track KHÔNG được tràn ra ngoài */
.hungfarm-partners-track {
display: flex;
flex-wrap: nowrap;
max-width: none;
/* track rộng tuỳ ý, viewport sẽ ẩn */
}
/* Button không bị co lại */
.hungfarm-partners-btn {
flex-shrink: 0;
min-width: 32px;
}
/* ═══ Container width 1260 + padding 30px override ═══ */
:root {
--container-max-width: 1230px;
--container-padding: 25px;
}
.hungfarm-container,
.container,
.hungfarm-main-container {
max-width: 1230px;
padding-left: 25px;
padding-right: 25px;
margin-left: auto;
margin-right: auto;
box-sizing: border-box;
}
.hungfarm-breadcrumb-wrapper .container {
padding: 10px 0px;
}
/* ═══════════════════════════════════════════════
HOMEPAGE SECTIONS — border-bottom + spacing đều nhau
═══════════════════════════════════════════════ */
/* Tất cả section trong .container trang chủ: border đỏ dưới + margin đều */
.container>section,
.container .hungfarm-reviews-section,
.container .hungfarm-news-section,
.container .hungfarm-partners-section,
.container section.home-page-content,
.container section.hungfarm-services-section,
.container section.hungfarm-featured-trees-section,
.container section.hungfarm-project-section,
.container section.hungfarm-top-trees-section {
border-bottom: 5px solid #AF0B0B;
margin-bottom: 25px;
padding-bottom: 0px;
}
/* Section cuối cùng không cần margin-bottom */
.container>section:last-child,
.container .hungfarm-partners-section {
border-bottom: none;
margin-bottom: 0;
padding-bottom: 30px;
}
.container>section.hungfarm-top-trees-section:after {
border-bottom: none !important;
display: none !important;
}
.hungfarm-tabs-section {
box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
border-radius: 10px;
padding-bottom: 30px !important;
}
.hungfarm-related-section:after {
display: none !important;
}
/* ═══ SECTION BORDER -- Full 1230px (Khớp với container container) ═══ */
.container>section,
.container .hungfarm-reviews-section,
.container .hungfarm-news-section,
.container .hungfarm-partners-section {
border-bottom: none !important;
position: relative;
}
/* Hide line on last section (Partners) */
.container .hungfarm-partners-section::after,
.container .hungfarm-posts-section::after {
display: none;
}
/* ═══════════════════════════════════════════════
DỊCH VỤ NỔI BẬT — hungfarm-services-section (FIXED 380x250)
═══════════════════════════════════════════════ */
/* Heading is already styled by user */
.hungfarm-services-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
margin-top: 25px;
margin-bottom: 25px;
}
.hungfarm-svc-card {
display: block;
position: relative;
border-radius: 5px;
overflow: hidden;
height: 250px;
text-decoration: none;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}
.hungfarm-svc-card__img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: transform 0.4s ease;
}
.hungfarm-svc-card:hover .hungfarm-svc-card__img {
transform: scale(1.05);
}
.hungfarm-svc-card__placeholder {
width: 100%;
height: 100%;
background: #e8ecef;
}
.hungfarm-svc-card__overlay {
position: absolute;
bottom: 15px;
left: 15px;
right: 15px;
background: rgba(239, 241, 239, 0.90);
border-radius: 4px;
height: 50px;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
transition: background 0.3s;
}
.hungfarm-svc-card__title {
display: block;
font-size: 16px;
font-weight: 500;
color: #105029;
margin: 0;
line-height: 1.3;
}
.hungfarm-svc-card:hover .hungfarm-svc-card__overlay {
background: rgba(255, 255, 255, 1);
}
.hungfarm-services-cta {
text-align: center;
margin-top: 30px;
margin-bottom: 20px;
}
.hungfarm-services-cta__btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
background: #FF9E03;
color: #fff;
font-size: 15px;
font-weight: 500;
padding: 12px 36px;
border-radius: 4px;
text-decoration: none;
text-transform: uppercase;
transition: background 0.2s, transform 0.2s;
}
.hungfarm-services-cta__btn:hover {
background: #dca800;
color: #fff;
transform: translateY(-2px);
}
.hungfarm-services-cta__btn svg {
margin-bottom: 2px;
}
/* Responsive Dịch Vụ Nổi Bật */
@media (max-width: 900px) {
.hungfarm-services-grid {
grid-template-columns: repeat(2, 1fr);
gap: 15px;
}
}
@media (max-width: 540px) {
.hungfarm-services-grid {
grid-template-columns: 1fr;
}
.hungfarm-svc-card {
height: 200px;
}
}
/* ═══════════════════════════════════════════════
DỊCH VỤ NỔI BẬT — hungfarm-services-section (FIXED 380x250)
═══════════════════════════════════════════════ */
/* Heading is already styled by user */
.hungfarm-services-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
margin-top: 25px;
margin-bottom: 25px;
}
.hungfarm-svc-card {
display: block;
position: relative;
border-radius: 10px;
overflow: hidden;
height: 250px;
text-decoration: none;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}
.hungfarm-svc-card__img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: transform 0.4s ease;
}
.hungfarm-svc-card:hover .hungfarm-svc-card__img {
transform: scale(1.05);
}
.hungfarm-svc-card__placeholder {
width: 100%;
height: 100%;
background: #e8ecef;
}
.hungfarm-svc-card__overlay {
position: absolute;
bottom: 25px;
left: 15px;
right: 15px;
background: #FFFFFFCC;
border-radius: 4px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
transition: background 0.3s;
}
.hungfarm-svc-card__title {
display: block;
font-size: 20px;
font-weight: 500;
color: #105029;
margin: 0;
line-height: 1.2;
}
.hungfarm-svc-card:hover .hungfarm-svc-card__overlay {
background: rgba(255, 255, 255, 1);
}
.hungfarm-services-cta {
text-align: center;
margin-top: 30px;
margin-bottom: 20px;
}
.hungfarm-services-cta__btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
background: #FF9E03;
color: #fff;
font-size: 16px;
font-weight: 500;
padding: 12px 36px;
border-radius: 10px;
text-decoration: none;
text-transform: uppercase;
transition: background 0.2s, transform 0.2s;
}
.hungfarm-services-cta__btn:hover {
background: #dca800;
color: #fff;
transform: translateY(-2px);
}
.hungfarm-services-cta__btn svg {
margin-bottom: 2px;
}
/* Responsive Dịch Vụ Nổi Bật */
@media (max-width: 900px) {
.hungfarm-services-grid {
grid-template-columns: repeat(2, 1fr);
gap: 15px;
}
}
@media (max-width: 540px) {
.hungfarm-services-grid {
grid-template-columns: 1fr;
}
.hungfarm-svc-card {
height: 200px;
}
}
/* ═══════════════════════════════════════════════════════════
HUNGFARM ARCHIVE PRODUCT — Trang Danh mục Sản phẩm
═══════════════════════════════════════════════════════════ */
/* Ẩn home-banner-img trên trang WooCommerce (archive, shop, single product) */
.woocommerce-page .home-banner-img,
.post-type-archive-product .home-banner-img,
.woocommerce .home-banner-img,
.tax-product_cat .home-banner-img {
display: none !important;
}
/* ── Wrapper chính ── */
.hungfarm-archive-main {
margin-bottom: 0;
}
.hungfarm-archive-container {
padding-top: 0;
padding-left: 0;
padding-right: 0;
}
/* ── Banner ảnh đầu trang (dùng ![]()
tag) ── */
.hungfarm-cat-banner {
width: calc(100% + 60px);
max-width: 1230px;
margin: 16px -30px 10px;
overflow: hidden;
border-radius: 10px;
height: auto;
}
.hungfarm-cat-banner .container {
padding: 0;
}
.hungfarm-cat-banner__img {
display: block;
width: 100%;
height: auto;
border-radius: 10px;
object-fit: cover;
}
@media (max-width: 767px) {
.hungfarm-cat-banner {
width: calc(100% + 30px);
margin-left: -15px;
margin-right: -15px;
border-radius: 0;
}
}
.hungfarm-cat-header {
text-align: left;
padding: 0;
border-bottom: 0;
margin-bottom: 0;
}
.hungfarm-cat-title {
font-size: 26px;
font-weight: 700;
color: var(--primary-color);
text-transform: uppercase;
letter-spacing: 0px;
margin: 0 0 10px;
line-height: 1.2;
text-align: center;
}
.hungfarm-cat-desc {
font-size: 16px;
line-height: 1.2;
color: #000;
max-width: 100%;
margin: 0 auto;
text-align: left;
}
.hungfarm-cat-title-2 {
font-size: 24px;
font-weight: 700;
color: var(--primary-color);
text-transform: uppercase;
letter-spacing: 0px;
margin: 10px 0 0px;
line-height: 1.2;
}
@media (max-width: 768px) {
.hungfarm-cat-title-2 {
font-size: 16px;
margin-top: 10px;
}
}
/* ── Toolbar: Tabs + Sort ── */
.hungfarm-cat-toolbar {
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: nowrap;
gap: 16px;
padding: 18px 0 16px;
border-bottom: 5px solid #FF9E03;
margin-bottom: 20px;
}
/* Sort: không bao giờ wrap */
.hungfarm-cat-sort {
display: flex;
align-items: center;
gap: 8px;
flex-shrink: 0;
}
/* ── Tabs danh mục cha ── */
.hungfarm-cat-tabs {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.hungfarm-cat-tab {
display: inline-block;
padding: 8px 18px;
border-radius: 50px;
font-size: 14px;
font-weight: 600;
color: #444;
background: #f3f4f6;
border: 1.5px solid #e2e4e8;
text-decoration: none;
transition: all 0.2s ease;
white-space: nowrap;
}
.hungfarm-cat-tab:hover {
background: var(--primary-color);
color: #fff;
border-color: var(--primary-color);
}
.hungfarm-cat-tab.is-active {
background: var(--primary-color);
color: #fff;
border-color: var(--primary-color);
}
/* ── Dropdown sắp xếp ── */
.hungfarm-cat-sort {
display: flex;
align-items: center;
gap: 8px;
flex-shrink: 0;
}
.hungfarm-sort-icon {
color: #888;
flex-shrink: 0;
}
.hungfarm-sort-label {
font-size: 13px;
color: #666;
white-space: nowrap;
}
.hungfarm-sort-dropdown {
position: relative;
}
.hungfarm-sort-current {
display: flex;
align-items: center;
gap: 6px;
background: #fff;
border: none !important;
border-radius: 6px;
padding: 8px 14px;
font-size: 14px;
font-weight: 600;
color: var(--primary-color);
cursor: pointer;
transition: border-color 0.2s;
white-space: nowrap;
}
.hungfarm-sort-current:hover,
.hungfarm-sort-dropdown.is-open .hungfarm-sort-current {
border-color: var(--primary-color);
}
.hungfarm-sort-list {
display: none;
position: absolute;
right: 0;
top: calc(100% + 6px);
min-width: 190px;
background: #fff;
border: 1px solid #dde0e5;
border-radius: 8px;
box-shadow: 0 8px 28px rgba(0, 0, 0, 0.12);
list-style: none;
margin: 0;
padding: 6px 0;
z-index: 999;
}
.hungfarm-sort-dropdown.is-open .hungfarm-sort-list {
display: block;
}
.hungfarm-sort-list li {
margin: 0;
padding: 0;
}
.hungfarm-sort-option {
display: block;
padding: 9px 16px;
font-size: 14px;
color: #333;
transition: background 0.15s, color 0.15s;
}
.hungfarm-sort-option:hover {
background: #f5f7f5;
color: var(--primary-color);
}
.hungfarm-sort-option.is-active {
color: var(--primary-color);
font-weight: 500;
background: #edf5ef;
}
/* ── Phân trang ── */
.hungfarm-cat-pagination {
margin-top: 28px;
margin-bottom: 8px;
display: flex;
justify-content: center;
flex-wrap: wrap;
gap: 6px;
}
.hungfarm-cat-pagination .page-numbers {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 38px;
height: 38px;
padding: 0 14px;
border-radius: 8px;
font-size: 14px;
font-weight: 500;
color: var(--primary-color, #105029);
background: #fff;
border: 1px solid #e4e4df;
text-decoration: none;
transition: all 0.15s ease;
box-sizing: border-box;
}
.hungfarm-cat-pagination .page-numbers:hover {
border-color: var(--primary-color, #105029);
color: var(--primary-color, #105029);
background: rgba(16, 80, 41, 0.05);
}
.hungfarm-cat-pagination .page-numbers.current {
background: var(--primary-color, #105029);
color: #fff !important;
border-color: var(--primary-color, #105029);
}
.hungfarm-cat-pagination .page-numbers.dots {
background: transparent;
border: none;
cursor: default;
}
/* ── Responsive ── */
@media (max-width: 960px) {
.hungfarm-cat-banner {
height: 240px;
}
.hungfarm-cat-title {
font-size: 22px;
}
}
@media (max-width: 768px) {
.hungfarm-cat-toolbar {
flex-direction: column;
align-items: flex-start;
}
.hungfarm-cat-sort {
align-self: flex-end;
}
.hungfarm-cat-banner {
height: 180px;
}
.hungfarm-cat-title {
font-size: 18px;
}
.hungfarm-cat-tab {
font-size: 13px;
padding: 6px 14px;
}
}
@media (max-width: 480px) {
.hungfarm-cat-banner {
height: 130px;
}
.hungfarm-cat-header {
padding: 20px 0 16px;
}
}
/* ── Mô tả SEO dài dưới phân trang ── */
.hungfarm-cat-bottom-desc {
margin-top: 0;
padding-top: 20px;
border-top: 1.5px solid #FF9E03;
padding-bottom: 15px;
}
.hungfarm-cat-bottom-desc__inner {
font-size: 15px;
line-height: 1.85;
color: #333;
}
.hungfarm-cat-bottom-desc__inner h1,
.hungfarm-cat-bottom-desc__inner h2,
.hungfarm-cat-bottom-desc__inner h3,
.hungfarm-cat-bottom-desc__inner h4 {
color: var(--primary-color);
font-weight: 500;
margin: 24px 0 10px;
line-height: 1.35;
}
.hungfarm-cat-bottom-desc__inner h1 {
font-size: 29px;
}
.hungfarm-cat-bottom-desc__inner h2 {
font-size: 26px;
}
.hungfarm-cat-bottom-desc__inner h3 {
font-size: 23px;
}
.hungfarm-cat-bottom-desc__inner h4 {
font-size: 20px;
}
.hungfarm-cat-bottom-desc__inner p {
margin: 0 0 14px;
}
.hungfarm-cat-bottom-desc__inner ul,
.hungfarm-cat-bottom-desc__inner ol {
padding-left: 22px;
margin: 0 0 14px;
}
.hungfarm-cat-bottom-desc__inner li {
margin-bottom: 6px;
}
.hungfarm-cat-bottom-desc__inner a {
color: var(--primary-color);
text-decoration: underline;
}
.hungfarm-cat-bottom-desc__inner a:hover {
color: var(--accent-color);
}
.hungfarm-cat-bottom-desc__inner img {
max-width: 100%;
height: auto;
border-radius: 6px;
margin: 10px 0;
}
.hungfarm-cat-bottom-desc__inner table {
width: 100%;
border-collapse: collapse;
margin: 14px 0;
font-size: 14px;
}
.hungfarm-cat-bottom-desc__inner table th,
.hungfarm-cat-bottom-desc__inner table td {
border: 1px solid #dde0e5;
padding: 9px 13px;
text-align: left;
}
.hungfarm-cat-bottom-desc__inner table th {
background: #f5f7f5;
font-weight: 600;
color: var(--primary-color);
}
.hungfarm-cat-bottom-desc__inner blockquote {
border-left: 4px solid var(--primary-color);
margin: 16px 0;
padding: 10px 16px;
background: #f9faf8;
color: #555;
font-style: italic;
}
.hungfarm-tabs-section::after {
display: none !important;
}
/* â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•
RESPONSIVE OVERHAUL — 4 BREAKPOINTS
BP1: max-width 1229px (min 850px)
BP2: max-width 849px (min 550px)
BP3: max-width 549px (min 440px)
BP4: max-width 439px (min 390px)
â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â• */
/* ── Mobile Header Elements — hidden by default on desktop ── */
.action_mobile_hhungfarm {
display: none;
}
.mobile_search_bar_hhungfarm {
display: none;
background: #105029;
padding: 10px 0;
border-top: 1px solid rgba(255, 255, 255, 0.1);
}
.mobile_search_bar_hhungfarm.is-open {
display: block;
}
.mobile_search_form_hhungfarm {
display: flex;
align-items: center;
gap: 8px;
background: #fff;
border-radius: 8px;
padding: 4px 10px;
}
.mobile_search_form_hhungfarm i {
color: #888;
flex-shrink: 0;
}
.mobile_search_form_hhungfarm input[type="search"] {
flex: 1;
border: none;
background: transparent;
font-size: 14px;
padding: 7px 4px;
outline: none;
color: #333;
}
.mobile_search_form_hhungfarm button {
background: var(--primary-color);
border: none;
border-radius: 6px;
width: 32px;
height: 32px;
display: flex;
align-items: center;
justify-content: center;
color: #fff;
cursor: pointer;
flex-shrink: 0;
}
/* Hamburger button */
.btn_hamburger_hhungfarm {
display: flex;
flex-direction: column;
justify-content: center;
gap: 5px;
width: 36px;
height: 36px;
background: rgba(255, 255, 255, 0.12);
border: none;
border-radius: 6px;
padding: 6px;
cursor: pointer;
flex-shrink: 0;
}
.btn_hamburger_hhungfarm span {
display: block;
width: 100%;
height: 2px;
background: #fff;
border-radius: 2px;
transition: all 0.25s ease;
}
.btn_hamburger_hhungfarm.is-open span:nth-child(1) {
transform: translateY(7px) rotate(45deg);
}
.btn_hamburger_hhungfarm.is-open span:nth-child(2) {
opacity: 0;
}
.btn_hamburger_hhungfarm.is-open span:nth-child(3) {
transform: translateY(-7px) rotate(-45deg);
}
/* Mobile search toggle */
.btn_mobile_search_hhungfarm {
width: 36px;
height: 36px;
background: rgba(255, 255, 255, 0.12);
border: none;
border-radius: 6px;
color: #fff;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
font-size: 15px;
flex-shrink: 0;
}
/* Mobile Nav Drawer */
.mobile_nav_hhungfarm {
position: fixed;
top: 0;
left: -100%;
width: 280px;
max-width: 85vw;
height: 100%;
background: #105029;
z-index: 99998;
overflow-y: auto;
transition: left 0.3s ease;
box-shadow: 4px 0 20px rgba(0, 0, 0, 0.3);
}
.mobile_nav_hhungfarm.is-open {
left: 0;
}
.mobile_nav_inner_hhungfarm {
padding: 20px 0 40px;
}
.mobile_nav_hhungfarm .mobile-nav-menu {
list-style: none;
padding: 0;
margin: 0;
}
.mobile_nav_hhungfarm .mobile-nav-menu li {
border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.mobile_nav_hhungfarm .mobile-nav-menu li a {
display: block;
padding: 14px 20px;
color: #fff;
font-size: 15px;
font-weight: 500;
text-decoration: none;
text-transform: uppercase;
transition: background 0.2s, padding-left 0.2s;
}
.mobile_nav_hhungfarm .mobile-nav-menu li a:hover,
.mobile_nav_hhungfarm .mobile-nav-menu li.current-menu-item>a {
background: rgba(255, 255, 255, 0.08);
color: #ffb800;
padding-left: 28px;
}
.mobile_nav_hhungfarm .mobile-nav-menu .sub-menu {
list-style: none;
padding: 0;
margin: 0;
background: rgba(0, 0, 0, 0.2);
}
.mobile_nav_hhungfarm .mobile-nav-menu .sub-menu li a {
padding-left: 32px;
font-size: 14px;
text-transform: none;
font-weight: 400;
}
/* CTA buttons trong mobile nav */
.mobile_nav_cta_hhungfarm {
display: flex;
gap: 10px;
padding: 20px 20px 0;
margin-top: 10px;
border-top: 1px solid rgba(255, 255, 255, 0.1);
}
.mobile_btn_call_hhungfarm,
.mobile_btn_zalo_hhungfarm {
flex: 1;
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
padding: 11px 10px;
border-radius: 8px;
font-size: 14px;
font-weight: 500;
text-decoration: none;
text-align: center;
}
.mobile_btn_call_hhungfarm {
background: var(--danger-color);
color: #fff !important;
}
.mobile_btn_zalo_hhungfarm {
background: #0068ff;
color: #fff !important;
}
/* Overlay */
.mobile_nav_overlay_hhungfarm {
position: fixed;
inset: 0;
background: rgba(0, 0, 0, 0.5);
z-index: 99997;
opacity: 0;
pointer-events: none;
transition: opacity 0.3s ease;
}
.mobile_nav_overlay_hhungfarm.is-open {
opacity: 1;
pointer-events: auto;
}
/* ────────────────────────────────────────── */
/* BP1: max-width 1229px */
/* ────────────────────────────────────────── */
@media (max-width: 1229px) {
.container,
.container_hhungfarm {
padding-left: 20px;
padding-right: 20px;
}
ul.products li.product {
flex: 0 0 calc(33.333% - 14px);
}
.hungfarm-gallery-col {
flex: 0 0 48%;
width: 48%;
}
.hungfarm-info-col {
flex: 1;
width: auto;
}
.hungfarm-main-img-wrap {
flex: 1;
width: auto;
height: 450px;
}
.hungfarm-tab-item a {
font-size: 18px !important;
padding: 12px 12px !important;
}
.hungfarm-cat-title {
font-size: 26px;
}
.ft-grid {
gap: 20px;
}
}
/* ────────────────────────────────────────── */
/* BP2: max-width 849px */
/* ────────────────────────────────────────── */
@media (max-width: 849px) {
.container,
.container_hhungfarm {
padding-left: 16px;
padding-right: 16px;
}
/* Header */
.nav_hhungfarm,
.search_box_hhungfarm,
.action_desktop_hhungfarm {
display: none !important;
}
.action_mobile_hhungfarm {
display: flex;
align-items: center;
gap: 8px;
}
.main_header_hhungfarm {
padding: 10px 0;
}
.logo_hhungfarm img {
max-height: 46px;
}
/* Top bar */
.top_bar_hhungfarm {
padding: 6px 0;
}
.top_link_hhungfarm {
font-size: 12px;
gap: 6px;
}
/* Product grid */
ul.products li.product {
flex: 0 0 calc(50% - 10px);
}
ul.products {
gap: 12px;
}
/* Single product */
.hungfarm-product-top {
flex-direction: column;
gap: 14px;
}
.hungfarm-gallery-col,
.hungfarm-info-col {
flex: unset;
width: 100%;
}
.hungfarm-gallery-col {
flex-direction: column-reverse;
}
.hungfarm-main-img-wrap {
flex: unset;
width: 100%;
height: 60vw;
max-height: 460px;
}
.hungfarm-thumb-strip {
flex-direction: row;
flex: unset;
width: 100%;
overflow-x: auto;
max-height: unset;
}
.hungfarm-thumb-btn {
flex-shrink: 0;
width: 80px;
height: 80px;
}
.hungfarm-thumb-wrap {
flex: unset;
width: 100%;
}
.hungfarm-tnav-up,
.hungfarm-tnav-down {
display: none !important;
}
.hungfarm-product-title {
font-size: 22px;
}
.hungfarm-cta {
font-size: 16px;
padding: 10px 8px;
}
/* Tabs */
.hungfarm-tab-item a {
font-size: 16px !important;
padding: 10px 10px !important;
}
.hungfarm-tab-content-inner {
padding: 0 16px;
}
/* Archive */
.hungfarm-cat-toolbar {
flex-direction: column;
align-items: flex-start;
gap: 10px;
padding: 14px 0 12px;
}
.hungfarm-cat-sort {
align-self: flex-end;
}
.hungfarm-cat-title {
font-size: 26px;
}
.hungfarm-cat-header {
padding: 20px 0 0;
}
.hungfarm-cat-banner {
height: 180px;
}
/* Footer: 2 col grid */
.ft-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 24px 20px;
}
.ft-col-brand {
grid-column: 1 / -1;
}
.ft-logo {
max-width: 180px;
height: auto;
}
/* Floating contact */
.floating-contact {
top: auto;
bottom: 16px;
right: 10px;
transform: none;
flex-direction: row;
gap: 6px;
}
.floating-contact a {
border-radius: 50%;
width: 44px;
height: 44px;
}
.floating-contact a:hover {
width: 44px;
}
/* Newsletter */
.nl-inner {
flex-direction: column;
gap: 16px;
}
.nl-row-top {
flex-direction: column;
gap: 8px;
}
/* Homepage services */
.hungfarm-services-grid {
grid-template-columns: repeat(2, 1fr);
gap: 12px;
}
.hungfarm-svc-card {
height: 220px;
}
/* Old product wrap */
.hungfarm-product-wrap {
flex-direction: column;
}
.hungfarm-gallery,
.hungfarm-summary {
flex: unset;
width: 100%;
}
/* Bảng giĂ¡ */
.bg-tabs-wrap {
padding: 14px 16px 0;
}
.hungfarm-banggia-header {
font-size: 13px;
padding: 10px 14px;
}
/* Breadcrumb */
.hungfarm-breadcrumb {
font-size: 12px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.rank-math-breadcrumb,
.rank-math-breadcrumb p {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
font-size: 12px;
}
}
/* ────────────────────────────────────────── */
/* BP3: max-width 549px */
/* ────────────────────────────────────────── */
@media (max-width: 549px) {
body {
font-size: 15px;
}
.container,
.container_hhungfarm {
padding-left: 12px;
padding-right: 12px;
}
/* Header */
.logo_hhungfarm img {
max-height: 40px;
}
.main_header_hhungfarm {
padding: 8px 0;
}
.action_mobile_hhungfarm {
gap: 6px;
}
.btn_hamburger_hhungfarm,
.btn_mobile_search_hhungfarm {
width: 34px;
height: 34px;
}
/* Top bar */
.top_bar_hhungfarm {
padding: 5px 0;
}
.top_link_hhungfarm {
font-size: 11px;
gap: 5px;
}
/* Product grid */
ul.products li.product {
flex: 0 0 calc(50% - 8px);
}
ul.products {
gap: 10px;
}
ul.products li.product a img {
height: 160px;
}
ul.products li.product .woocommerce-loop-product__title {
font-size: 13px;
padding: 8px 8px 4px;
}
ul.products li.product .price {
font-size: 13px;
padding: 0 8px 6px;
}
/* Single product */
.hungfarm-product-title {
font-size: 18px;
line-height: 1.3;
margin-bottom: 12px;
}
.hungfarm-main-img-wrap {
height: 65vw;
max-height: 360px;
}
.hungfarm-thumb-btn {
width: 64px;
height: 64px;
}
.hungfarm-italic-quote {
font-size: 14px;
padding: 10px 12px;
}
.hungfarm-checklist-wrap {
flex-direction: column;
}
.hungfarm-checklist-col li {
font-size: 14px;
}
/* CTA */
.hungfarm-cta-wrap {
flex-direction: column;
gap: 8px;
}
.hungfarm-cta {
font-size: 15px;
padding: 11px 10px;
border-radius: 8px;
}
/* Lead form */
.hungfarm-lead-row2,
.hungfarm-lead-row1 {
flex-direction: column;
gap: 8px;
}
.hungfarm-lead-intro {
font-size: 14px;
}
/* Tabs */
.hungfarm-tab-item a {
font-size: 14px !important;
padding: 10px 8px !important;
}
.hungfarm-tab-content-inner {
font-size: 15px;
padding: 0 8px;
}
.hungfarm-read-more-btn {
font-size: 15px;
}
/* Archive */
.hungfarm-cat-title {
font-size: 18px;
}
.hungfarm-cat-tab {
font-size: 12px;
padding: 6px 12px;
}
.hungfarm-cat-banner {
height: 130px;
}
/* Footer: 1 col */
.ft-grid {
grid-template-columns: 1fr;
gap: 20px;
}
.ft-col-brand {
grid-column: auto;
}
.ft-logo {
max-width: 160px;
}
.ft-col-title {
font-size: 16px;
margin-bottom: 10px;
}
.ft-bottom {
flex-direction: column;
gap: 10px;
text-align: center;
}
.ft-badges {
justify-content: center;
}
/* Floating */
.floating-contact {
bottom: 12px;
right: 8px;
gap: 5px;
}
.floating-contact a {
width: 40px;
height: 40px;
font-size: 18px;
}
/* Homepage */
.hungfarm-services-grid {
grid-template-columns: 1fr;
gap: 10px;
}
.hungfarm-svc-card {
height: 200px;
}
.hungfarm-svc-card__title {
font-size: 15px;
}
.hungfarm-services-cta__btn {
font-size: 14px;
padding: 10px 24px;
}
/* Newsletter */
.nl-heading {
font-size: 18px;
}
.nl-submit {
padding: 10px 16px;
font-size: 14px;
}
/* Section title */
.section-title {
font-size: 18px;
}
/* Bảng giĂ¡ */
.hungfarm-kho-tab {
padding: 7px 12px;
font-size: 12px;
}
.bg-header {
font-size: 13px;
padding: 9px 14px;
}
/* Lightbox */
.hungfarm-lb-inner {
flex-direction: column;
}
.hungfarm-lb-thumbs {
width: 100%;
height: 70px;
max-height: 70px;
flex-direction: row;
overflow-x: auto;
overflow-y: hidden;
}
.hungfarm-lbt {
width: 50px;
height: 66px;
flex-shrink: 0;
}
.hungfarm-lb-media-wrap {
width: 100vw;
height: 56vw;
}
.hungfarm-lb-img {
object-fit: contain;
}
.hungfarm-lb-caption,
.hungfarm-lb-cta-bar {
width: 100%;
box-sizing: border-box;
}
.hungfarm-lb-cta {
font-size: 12px;
padding: 11px 8px;
}
.hungfarm-lb-prev,
.hungfarm-lb-next {
display: none;
}
/* Cam ket */
.hungfarm-camket-header strong {
font-size: 16px;
}
}
/* ────────────────────────────────────────── */
/* BP4: max-width 439px (390–439px) */
/* ────────────────────────────────────────── */
@media (max-width: 439px) {
body {
font-size: 14px;
}
.container,
.container_hhungfarm {
padding-left: 10px;
padding-right: 10px;
}
/* Header */
.logo_hhungfarm img {
max-height: 38px;
}
.main_header_hhungfarm {
padding: 7px 0;
}
.btn_hamburger_hhungfarm,
.btn_mobile_search_hhungfarm {
width: 32px;
height: 32px;
font-size: 13px;
}
/* Top bar */
.top_link_hhungfarm {
font-size: 10px;
gap: 4px;
}
.top_bar_hhungfarm {
padding: 4px 0;
}
/* Product grid */
ul.products {
gap: 8px;
}
ul.products li.product {
flex: 0 0 calc(50% - 4px);
}
ul.products li.product a img {
height: 140px;
}
ul.products li.product .woocommerce-loop-product__title {
font-size: 12px;
padding: 6px 6px 3px;
}
ul.products li.product .price {
font-size: 12px;
padding: 0 6px 6px;
}
ul.products li.product .button {
margin: 0 6px 8px;
font-size: 11px;
padding: 6px;
}
/* Single product */
.hungfarm-product-title {
font-size: 16px;
line-height: 1.3;
margin-bottom: 10px;
}
.hungfarm-main-img-wrap {
height: 72vw;
max-height: 320px;
}
.hungfarm-thumb-btn {
width: 56px;
height: 56px;
}
.hungfarm-italic-quote {
font-size: 13px;
padding: 8px 10px;
}
.hungfarm-checklist-col li {
font-size: 13px;
}
.hungfarm-cta {
font-size: 14px;
padding: 10px 8px;
}
/* Cam ket */
.hungfarm-camket-header strong {
font-size: 14px;
}
.hungfarm-camket-text strong {
font-size: 14px;
}
.hungfarm-camket-text small {
font-size: 12px;
}
/* Tabs */
.hungfarm-tab-item a {
font-size: 13px !important;
padding: 9px 7px !important;
}
.hungfarm-tab-content-inner {
font-size: 14px;
padding: 0 6px;
}
/* Archive */
.hungfarm-cat-title {
font-size: 16px;
}
.hungfarm-cat-tab {
font-size: 11px;
padding: 5px 10px;
}
.hungfarm-cat-banner {
height: 110px;
}
/* Section titles */
.section-title,
.hungfarm-section-heading {
font-size: 16px;
}
/* Footer */
.ft-grid {
gap: 16px;
}
.ft-logo {
max-width: 140px;
}
/* Floating */
.floating-contact a {
width: 38px;
height: 38px;
font-size: 17px;
}
.floating-contact {
gap: 4px;
bottom: 10px;
right: 6px;
}
/* Newsletter */
.nl-heading {
font-size: 16px;
}
.nl-submit {
padding: 9px 12px;
font-size: 13px;
}
/* Homepage */
.hungfarm-services-cta__btn {
font-size: 13px;
padding: 9px 20px;
}
/* Lead form */
.hungfarm-lead-intro {
font-size: 13px;
}
.hungfarm-lead-form button[type="submit"] {
font-size: 13px;
padding: 9px 12px;
}
/* Bảng giĂ¡ */
.hungfarm-kho-tab {
padding: 6px 10px;
font-size: 11px;
}
.bg-header {
font-size: 12px;
padding: 8px 12px;
}
/* Breadcrumb */
.hungfarm-breadcrumb,
.rank-math-breadcrumb,
.rank-math-breadcrumb p {
font-size: 11px;
}
/* Archive sort */
.hungfarm-cat-sort .hungfarm-sort-label {
display: none;
}
.hungfarm-sort-current {
font-size: 12px;
padding: 6px 10px;
}
}
/* â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•
FILTER POPUP — hungfarm-filter-*
NĂºt bá»™ lá»c + popup sheet theo mockup
â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â• */
/* ── NĂºt Bá»™ lá»c trong toolbar ── */
.hungfarm-filter-btn {
display: inline-flex;
align-items: center;
gap: 7px;
background: #fff;
border: 1.5px solid #e2e4e8;
border-radius: 50px;
padding: 8px 16px;
font-size: 14px;
font-weight: 600;
color: #333;
cursor: pointer;
white-space: nowrap;
flex-shrink: 0;
transition: border-color 0.2s, background 0.2s, color 0.2s;
}
.hungfarm-filter-btn:hover,
.hungfarm-filter-btn[aria-expanded="true"] {
border-color: var(--primary-color);
background: var(--primary-color);
color: #fff;
}
.hungfarm-filter-btn svg {
flex-shrink: 0;
}
/* Badge số lượng filter đang active */
.hungfarm-filter-count {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 18px;
height: 18px;
background: #AF0B0B;
color: #fff;
font-size: 11px;
font-weight: 500;
border-radius: 50px;
padding: 0 5px;
line-height: 1;
}
/* ── Popup wrapper (full-screen fixed) ── */
.hungfarm-filter-popup {
position: fixed;
inset: 0;
z-index: 99990;
display: flex;
align-items: flex-start;
justify-content: center;
padding-top: 60px;
}
.hungfarm-filter-popup[hidden] {
display: none;
}
/* Animate in */
.hungfarm-filter-popup .hungfarm-filter-sheet {
transform: translateY(-18px);
opacity: 0;
transition: transform 0.26s ease, opacity 0.26s ease;
}
.hungfarm-filter-popup.is-open .hungfarm-filter-sheet {
transform: translateY(0);
opacity: 1;
}
/* ── Overlay tối ── */
.hungfarm-filter-overlay {
position: absolute;
inset: 0;
background: rgba(0, 0, 0, 0.45);
cursor: pointer;
}
/* ── Sheet nội dung ── */
.hungfarm-filter-sheet {
position: relative;
z-index: 1;
background: #fff;
border-radius: 12px;
width: 560px;
max-width: calc(100vw - 20px);
max-height: calc(100vh - 80px);
overflow-y: auto;
box-shadow: 0 16px 48px rgba(0, 0, 0, 0.18);
}
/* ── Header sheet ── */
/* ── Header sheet ── */
.hungfarm-filter-sheet__head {
display: flex;
align-items: center;
justify-content: space-between;
padding: 16px 20px 14px;
border-bottom: 1px solid #f0f0f0;
position: sticky;
top: 0;
background: #fff;
z-index: 2;
}
.hungfarm-filter-sheet__head span {
font-size: 15px;
font-weight: 600;
color: #222;
}
.hungfarm-filter-close {
background: none;
border: none;
cursor: pointer;
padding: 4px;
color: #AF0B0B;
display: flex;
align-items: center;
transition: opacity 0.2s;
}
.hungfarm-filter-close:hover {
opacity: 0.7;
}
/* ── Từng nhĂ³m filter ── */
.hungfarm-filter-form {
padding: 0 20px 16px;
}
.hungfarm-filter-group {
padding: 16px 0;
border-bottom: 1px solid #f0f0f0;
}
.hungfarm-filter-group:last-of-type {
border-bottom: none;
}
.hungfarm-filter-group__title {
font-size: 13px;
font-weight: 500;
color: #AF0B0B;
text-transform: uppercase;
letter-spacing: 0.4px;
margin-bottom: 12px;
}
/* ── Chips ── */
.hungfarm-filter-chips {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.hungfarm-chip {
display: inline-flex;
align-items: center;
padding: 7px 14px;
border-radius: 50px;
font-size: 13px;
font-weight: 500;
color: #444;
/* background: #f3f4f6;
border: 1.5px solid #e2e4e8; */
cursor: pointer;
user-select: none;
transition: all 0.18s ease;
white-space: nowrap;
}
.hungfarm-chip:hover {
border-color: var(--primary-color);
color: var(--primary-color);
background: #f0f8f4;
}
.hungfarm-chip.is-active {
border-color: var(--accent-color);
background: #fff;
color: #222;
font-weight: 600;
box-shadow: 0 0 0 1px var(--accent-color);
}
/* ── Footer actions ── */
.hungfarm-filter-actions {
display: flex;
gap: 10px;
padding: 16px 0 4px;
margin-top: 4px;
border-top: 1px solid #f0f0f0;
}
.hungfarm-filter-reset {
flex: 1;
padding: 11px;
background: #f3f4f6;
border: 1.5px solid #e2e4e8;
border-radius: 8px;
font-size: 14px;
font-weight: 600;
color: #555;
cursor: pointer;
transition: background 0.2s, border-color 0.2s;
}
.hungfarm-filter-reset:hover {
background: #e8eaed;
border-color: #ccc;
}
.hungfarm-filter-apply {
flex: 2;
padding: 11px;
background: var(--primary-color);
border: none;
border-radius: 8px;
font-size: 14px;
font-weight: 500;
color: #fff;
cursor: pointer;
transition: opacity 0.2s;
text-transform: uppercase;
letter-spacing: 0.3px;
}
.hungfarm-filter-apply:hover {
opacity: 0.88;
}
/* ── Responsive ── */
@media (max-width: 549px) {
.hungfarm-filter-popup {
padding-top: 40px;
}
.hungfarm-filter-sheet {
border-radius: 12px 12px 0 0;
}
.hungfarm-chip {
font-size: 12px;
padding: 6px 11px;
}
}
/* ── Toolbar (filter+sort) ── */
.hungfarm-cat-toolbar {
background: #f7f8f6;
border: 1px solid #e4e4df;
border-radius: 12px;
padding: 12px 18px;
margin-bottom: 15px;
}
.hungfarm-toolbar-row2 {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
gap: 16px;
}
.hungfarm-toolbar-count {
font-size: 15px;
color: #666;
font-family: "Roboto", sans-serif;
}
.hungfarm-toolbar-count strong {
color: #222;
font-weight: 700;
}
.hungfarm-toolbar-actions {
display: flex;
align-items: center;
gap: 10px;
}
.hungfarm-filter-btn {
background: #fff;
border: 1px solid #ccc;
border-radius: 8px;
padding: 8px 16px;
font-size: 14.5px;
font-weight: 500;
color: #222;
cursor: pointer;
display: inline-flex;
align-items: center;
gap: 6px;
transition: border-color 0.2s, color 0.2s;
font-family: "Roboto", sans-serif;
}
.hungfarm-filter-btn:hover {
border-color: var(--primary-color, #105029);
color: var(--primary-color, #105029);
}
.hungfarm-filter-svg-icon {
color: #222;
display: inline-block;
vertical-align: middle;
transition: color 0.2s;
}
.hungfarm-filter-btn:hover .hungfarm-filter-svg-icon {
color: var(--primary-color, #105029);
}
.hungfarm-sort-select {
background: #fff;
border: 1px solid #ccc;
border-radius: 8px;
padding: 8px 32px 8px 14px;
font-size: 14.5px;
font-weight: 500;
color: #222;
cursor: pointer;
outline: none;
font-family: "Roboto", sans-serif;
transition: border-color 0.2s, color 0.2s;
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-position: right 12px center;
}
.hungfarm-sort-select:hover {
border-color: var(--primary-color, #105029);
color: var(--primary-color, #105029);
background-image: url("data:image/svg+xml;utf8,");
}
@media (max-width: 849px) {
.hungfarm-cat-toolbar {
padding: 10px 14px;
}
}
@media (max-width: 549px) {
.hungfarm-toolbar-row2 {
flex-direction: column;
align-items: flex-start;
gap: 12px;
}
.hungfarm-toolbar-actions {
width: 100%;
display: flex;
justify-content: space-between;
gap: 8px;
}
.hungfarm-filter-btn {
flex: 1;
justify-content: center;
}
.hungfarm-cat-sort {
flex: 1;
}
.hungfarm-sort-select {
width: 100%;
box-sizing: border-box;
}
}
.hungfarm-cat-bottom-desc .hungfarm-cat-bottom-desc__inner {
max-height: 100%;
}
/* ── Product Card in Category Archive ── */
.hungfarm-archive-grid .hungfarm-tt-card {
border-radius: 8px;
border: 1px solid #e2e2e2;
padding: 0;
overflow: hidden;
display: flex;
flex-direction: column;
background: #fff;
gap: 0;
}
.hungfarm-archive-grid .hungfarm-tt-card__img-wrap {
border-radius: 0;
width: 100%;
aspect-ratio: 3 / 4;
}
.hungfarm-archive-grid .hungfarm-tt-card__stars {
text-align: left;
margin: 12px 12px 4px 12px;
color: #ff9e03;
}
/* Hide star ratings on cards that don't have review ratings */
.hungfarm-archive-grid .hungfarm-tt-card__stars:empty {
display: none;
}
.hungfarm-archive-grid .hungfarm-tt-card__name {
text-align: left;
height: auto;
font-size: 16px !important;
color: #000;
/* margin: 10px 12px 6px 12px; */
line-height: 1.3;
display: block;
height: 44px;
overflow: hidden;
font-family: 'Roboto';
}
/* Adjust top margin for name if stars block is empty or missing */
.hungfarm-archive-grid .hungfarm-tt-card__stars:empty+.hungfarm-tt-card__name,
.hungfarm-archive-grid .hungfarm-tt-card__img-wrap+.hungfarm-tt-card__name {
margin-top: 12px;
}
.hungfarm-archive-grid .hungfarm-tt-card__name a {
color: #105e45 !important;
}
.hungfarm-archive-grid .hungfarm-tt-card__name a:hover {
color: var(--primary-color, #105029) !important;
}
.hungfarm-archive-grid .hungfarm-tt-card__price {
text-align: left;
color: #000;
font-size: 16px;
font-weight: 700;
text-transform: uppercase;
}
.hungfarm-archive-grid .hungfarm-tt-card__price span.amount {
color: #222 !important;
}
.hungfarm-archive-grid .hungfarm-tt-card__badge--below {
background: #105029;
border: none;
color: #fff !important;
font-size: 14.5px;
font-weight: 600;
padding: 10px 12px;
border-radius: 6px;
display: flex;
align-items: center;
justify-content: center;
gap: 6px;
text-transform: none;
margin: auto 12px 12px 12px;
margin: 0 auto;
width: 86%;
margin-bottom: 15px;
}
.hungfarm-archive-grid .hungfarm-tt-card__badge--below:hover {
background: #193a1c;
color: #fff !important;
text-decoration: none !important;
}
/* Telephone icon inside badge is red */
.hungfarm-archive-grid .hungfarm-tt-card__badge--below svg {
color: #ff3b30;
fill: currentColor;
}
/* Yêu cầu canh đều 2 bên cho tất cả đoạn text */
body p,
.entry-content,
.hhungfarm-post-content,
.page-description,
.intro-text,
.feature-card p,
.author-info p,
.contact-details-list p,
.contact-footer-note p,
.widget p {
text-align: justify;
}
/* =====================================================
HEADER HUNGFARM – Clean rebuild (prefix: hf-)
Max-width: 1230px | Padding: 0 30px
===================================================== */
/* ── Container chung 1230px ── */
.hf-container {
max-width: 1230px;
margin: 0 auto;
padding: 0 30px;
box-sizing: border-box;
width: 100%;
}
/* ── Reset list trong header ── */
#header ul,
#header ol,
#header li {
list-style: none !important;
margin: 0;
padding: 0;
}
/* ── HEADER = 1230px centered ── */
#header.header {
max-width: 1230px !important;
margin: 0 auto !important;
position: relative;
z-index: 1000;
overflow: visible !important;
margin-left: -30px !important;
margin-right: -30px !important;
}
@media (max-width: 767px) {
#header.header {
margin-left: -15px !important;
margin-right: -15px !important;
}
}
.header-wrapper {
width: 100%;
background: transparent;
}
/* =====================================================
TOP BAR – full viewport width, green
===================================================== */
#top-bar.header-top {
background-color: #105029;
width: 100%;
}
#top-bar .hf-container {
display: flex;
align-items: center;
justify-content: center;
padding-top: 9px;
padding-bottom: 9px;
}
#top-bar a {
color: #fff !important;
font-size: 13px;
font-weight: 700;
text-decoration: none;
display: inline-flex;
align-items: center;
gap: 6px;
}
/* =====================================================
MAIN HEADER – full width, white bg
===================================================== */
#masthead.header-main {
background-color: #fff;
width: 100%;
}
.hf-header-inner {
display: flex;
align-items: center;
gap: 16px;
flex-wrap: nowrap;
padding-top: 0;
padding-bottom: 0;
min-height: 70px;
}
/* Logo */
.hf-logo {
flex: 0 0 auto;
width: 220px;
}
.hf-logo img,
.hf-logo a img {
max-height: 75px;
width: auto;
display: block;
padding: 3px 0;
}
/* Search bar */
.hf-search {
flex: 1 1 0;
min-width: 0;
}
.hf-search-form {
display: flex;
align-items: center;
gap: 12px;
background: #f7f9fa;
border: 1px solid #e2e8f0;
border-radius: 25px;
padding: 0 16px 0 20px;
height: 44px;
width: 100%;
box-sizing: border-box;
max-width: 500px;
margin: 0 auto;
transition: all 0.2s ease;
}
.hf-search-form:focus-within {
border-color: #105029;
background: #fff;
box-shadow: 0 0 0 2px rgba(2, 135, 17, 0.1);
}
.hf-search-form input[type="search"] {
flex: 1;
border: none;
outline: none;
background: transparent;
font-size: 15px;
color: #333;
padding: 0;
}
.hf-search-form input[type="search"]::placeholder {
color: #999;
}
.hf-search-btn {
background: none;
border: none;
padding: 0 4px;
cursor: pointer;
color: #333;
display: flex;
align-items: center;
justify-content: center;
font-size: 16px;
transition: color 0.2s ease;
}
.hf-search-btn:hover {
color: #105029;
}
/* Cart */
.hf-cart {
flex: 0 0 auto;
}
.hf-cart-link {
display: inline-flex;
align-items: center;
gap: 6px;
color: #105029 !important;
font-weight: 700;
font-size: 14px;
text-decoration: none;
white-space: nowrap;
text-transform: uppercase;
margin-right: 50px;
}
.hf-cart-label {
font-size: 15px;
font-weight: 700;
color: #105029;
letter-spacing: 0.2px;
}
.hf-cart-icon {
position: relative;
display: inline-block;
font-size: 20px;
color: #105029;
}
/* Cart counter badge */
.hf-cart-icon[data-icon-label]:after {
content: attr(data-icon-label);
position: absolute;
top: -9px;
right: -8px;
background: #ff0000;
color: #fff;
font-size: 10px;
font-weight: 700;
line-height: 1;
padding: 5px 5px;
border-radius: 10px;
min-width: 10px;
text-align: center;
}
/* Redesigned Header Actions (Hệ thống & Giỏ hàng pills) */
.hf-header-actions {
display: flex;
align-items: center;
gap: 12px;
margin-left: 20px;
}
.hf-action-pill {
display: inline-flex;
align-items: center;
gap: 8px;
background-color: #ffffff;
border: 1px solid #e2e8f0;
padding: 6px 16px;
border-radius: 30px;
color: #334155 !important;
font-size: 14px;
font-weight: 500;
text-decoration: none;
transition: all 0.2s ease;
height: 38px;
box-sizing: border-box;
}
.hf-action-pill:hover {
border-color: #105029;
color: #105029 !important;
box-shadow: 0 2px 8px rgba(2, 135, 17, 0.08);
}
.hf-icon-wrap {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 16px;
width: 20px;
height: 20px;
}
.hf-icon-wrap i {
font-size: 16px;
}
.hf-badge {
position: absolute;
top: -8px;
left: -8px;
background-color: #105029;
color: #ffffff;
font-size: 9px;
font-weight: 700;
line-height: 1;
min-width: 14px;
height: 14px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
padding: 0 3px;
border: 1.5px solid #ffffff;
box-sizing: border-box;
}
.hf-badge[data-icon-label]::after {
content: attr(data-icon-label);
}
/* Cart popup ẩn mặc định */
#cart-popup.widget_shopping_cart,
.mfp-hide {
display: none !important;
}
#cart-popup.widget_shopping_cart.is-open {
display: block !important;
position: absolute;
right: 0;
top: 100%;
background: #fff;
border-radius: 8px;
padding: 20px;
min-width: 320px;
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
z-index: 9999;
}
/* Mobile nav */
.hf-mobile-nav {
display: none;
align-items: center;
gap: 16px;
margin-left: auto;
}
.hf-hamburger,
.hf-mobile-nav .hf-cart-link {
color: #105029 !important;
font-size: 22px;
text-decoration: none;
}
/* =====================================================
WIDE NAV – full viewport width, border bottom
===================================================== */
#wide-nav.header-bottom {
background-color: #fff;
border-bottom: 1px solid #105029;
width: 100%;
min-height: 50px;
padding-bottom: 2px;
}
.hf-nav-inner {
display: flex;
align-items: center;
flex-wrap: nowrap;
min-height: 50px;
gap: 0;
}
/* Mega menu (trái) */
.hf-mega-wrap {
position: relative;
flex: 0 0 auto;
width: 230px !important;
box-sizing: border-box !important;
}
.hf-mega-title {
background-color: #f8c144 !important;
color: #000 !important;
padding: 10px 18px !important;
font-weight: 700;
font-size: 15px;
cursor: pointer;
display: inline-flex;
align-items: center;
gap: 8px;
white-space: nowrap;
user-select: none;
width: 100% !important;
box-sizing: border-box !important;
justify-content: flex-start;
border-radius: 4px;
margin-bottom: -5px;
}
.hf-mega-title i {
color: #000 !important;
}
#mega_menu {
display: none;
position: absolute;
top: 100%;
left: 0;
background: #fff;
border: 1px solid #e0e0e0;
border-radius: 0 0 4px 4px;
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
width: 230px !important;
z-index: 9999;
padding: 6px 0;
list-style: none !important;
box-sizing: border-box !important;
margin-top: 5px !important;
}
#mega_menu li {
list-style: none !important;
position: relative !important;
}
.ot-vm-hover:hover #mega_menu {
display: block !important;
}
#mega_menu li a {
display: block;
padding: 9px 18px;
color: #222;
font-size: 14px;
text-decoration: none;
border-bottom: 1px solid #f5f5f5;
transition: color 0.2s, padding-left 0.2s;
white-space: nowrap;
}
#mega_menu li:last-child a {
border-bottom: none;
}
#mega_menu li a:hover {
color: #105029;
padding-left: 24px;
background: #f8f8f8;
}
#mega_menu li.menu-item-has-children>a {
position: relative;
padding-right: 30px;
}
#mega_menu li.menu-item-has-children>a::after {
content: "\f105";
font-family: "Font Awesome 6 Free";
font-weight: 900;
position: absolute;
right: 18px;
top: 50%;
transform: translateY(-50%);
font-size: 12px;
color: #888;
transition: color 0.2s;
}
#mega_menu li.menu-item-has-children:hover>a::after {
color: #105029;
}
/* ── SUB-MENUS FLYOUT FOR VERTICAL MENU ── */
#mega_menu li:hover>ul.sub-menu {
display: block !important;
}
#mega_menu ul.sub-menu {
position: absolute !important;
display: none;
top: 0 !important;
left: 100% !important;
z-index: 99999 !important;
background: #fff !important;
border: 1px solid #e0e0e0 !important;
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12) !important;
min-width: 210px !important;
padding: 6px 0 !important;
margin: 0 !important;
list-style: none !important;
border-radius: 0 4px 4px 4px !important;
}
#mega_menu ul.sub-menu li {
width: 100% !important;
}
#mega_menu ul.sub-menu li a {
display: block !important;
padding: 9px 18px !important;
color: #222 !important;
font-size: 14px !important;
text-decoration: none !important;
border-bottom: 1px solid #f5f5f5 !important;
white-space: nowrap !important;
transition: color 0.2s, padding-left 0.2s !important;
}
#mega_menu ul.sub-menu li:last-child a {
border-bottom: none !important;
}
#mega_menu ul.sub-menu li a:hover {
color: #105029 !important;
padding-left: 24px !important;
background: #f8f8f8 !important;
}
/* =====================================================
MEGA MENU WIDE DROPDOWN
===================================================== */
#mega_menu li.mega-menu:hover>ul.sub-menu {
display: flex !important;
}
#mega_menu li.mega-menu>ul.sub-menu {
width: 780px !important;
min-height: 280px !important;
display: none;
flex-wrap: wrap !important;
flex-direction: row !important;
gap: 20px !important;
padding: 20px 25px !important;
box-sizing: border-box !important;
border-radius: 0 8px 8px 8px !important;
background: #fff !important;
border: 1px solid #e2ece2 !important;
box-shadow: 0 10px 30px rgba(16, 80, 41, 0.08) !important;
}
/* Columns inside the mega menu */
#mega_menu li.mega-menu>ul.sub-menu>li {
flex: 1 1 160px !important;
max-width: 180px !important;
list-style: none !important;
margin: 0 !important;
padding: 0 !important;
}
/* Heading of each column */
#mega_menu li.mega-menu>ul.sub-menu>li>a {
font-weight: 700 !important;
font-size: 14px !important;
color: var(--primary-color) !important;
border-bottom: 2px solid #e0ece0 !important;
padding: 0 0 8px 0 !important;
margin-bottom: 12px !important;
text-transform: uppercase !important;
letter-spacing: 0.5px !important;
display: block !important;
white-space: normal !important;
}
#mega_menu li.mega-menu>ul.sub-menu>li>a:hover {
color: #f8c144 !important;
border-bottom-color: #f8c144 !important;
padding-left: 0 !important;
background: transparent !important;
}
/* Nested lists inside columns */
#mega_menu li.mega-menu>ul.sub-menu>li>ul.sub-menu {
position: static !important;
display: block !important;
border: none !important;
box-shadow: none !important;
padding: 0 !important;
margin: 0 !important;
width: 100% !important;
min-width: 0 !important;
background: transparent !important;
}
/* Leaf links inside columns */
#mega_menu li.mega-menu>ul.sub-menu>li>ul.sub-menu>li {
width: 100% !important;
}
#mega_menu li.mega-menu>ul.sub-menu>li>ul.sub-menu>li>a {
font-weight: 400 !important;
font-size: 13px !important;
color: #555 !important;
padding: 6px 0 !important;
border-bottom: none !important;
white-space: normal !important;
background: transparent !important;
transition: all 0.2s ease !important;
display: block !important;
}
#mega_menu li.mega-menu>ul.sub-menu>li>ul.sub-menu>li>a:hover {
color: var(--primary-color) !important;
padding-left: 6px !important;
background: transparent !important;
}
/* Primary nav (giữa) */
.hf-primary-nav {
flex: 1 1 auto;
display: flex;
align-items: center;
justify-content: center;
}
.hf-primary-nav .custom-primary-nav,
.hf-primary-nav ul.nav {
display: flex !important;
list-style: none !important;
margin: 0;
padding: 0;
gap: 8px !important;
align-items: center;
}
.hf-primary-nav ul li {
list-style: none !important;
position: relative;
}
.hf-primary-nav>ul>li>a {
color: rgb(16, 80, 41) !important;
border: 1px solid rgb(16, 80, 41);
background-color: inherit;
border-radius: 20px;
padding: 8px 18px !important;
font-size: 16px !important;
text-transform: none !important;
font-weight: 600 !important;
display: block;
text-decoration: none;
white-space: nowrap;
transition: all 0.2s ease;
}
.hf-primary-nav>ul>li>a:hover {
background-color: #e2eff6 !important;
color: #105029 !important;
}
.hf-primary-nav>ul>li.current-menu-item>a,
.hf-primary-nav>ul>li.current-menu-ancestor>a,
.hf-primary-nav>ul>li.current_page_item>a {
background-color: #105029 !important;
color: #ffffff !important;
}
.hf-primary-nav>ul>li.current-menu-item>a:hover,
.hf-primary-nav>ul>li.current-menu-ancestor>a:hover,
.hf-primary-nav>ul>li.current_page_item>a:hover {
color: #ffffff !important;
background-color: #105029 !important;
}
/* Dropdown */
.hf-primary-nav ul>li>ul.sub-menu {
display: none;
position: absolute;
top: 100%;
left: 0;
background: #fff;
border-radius: 6px;
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
min-width: 200px;
z-index: 9999;
list-style: none !important;
padding: 6px 0;
margin: 0;
}
.hf-primary-nav ul>li:hover>ul.sub-menu {
display: block;
}
.hf-primary-nav ul>li>ul.sub-menu li a {
display: block;
padding: 9px 16px;
color: #222;
font-size: 14px;
border-bottom: 1px solid #f5f5f5;
text-decoration: none;
font-weight: 400;
text-transform: none;
}
.hf-primary-nav ul>li>ul.sub-menu li:last-child a {
border-bottom: none;
}
.hf-primary-nav ul>li>ul.sub-menu li a:hover {
color: #105029;
background: #f8f8f8;
}
/* =====================================================
PRIMARY NAV MEGA MENU DROPDOWN
===================================================== */
.hf-primary-nav {
position: relative;
}
.hf-primary-nav ul li.mega-menu {
position: static !important;
}
.hf-primary-nav ul li.mega-menu:hover>ul.sub-menu {
display: flex !important;
}
.hf-primary-nav ul li.mega-menu>ul.sub-menu {
position: absolute !important;
top: 100% !important;
left: 50% !important;
transform: translateX(-50%) !important;
width: 100% !important;
max-width: 1000px !important;
min-height: 250px !important;
display: none;
flex-wrap: wrap !important;
flex-direction: row !important;
gap: 20px !important;
padding: 25px !important;
box-sizing: border-box !important;
background: #fff !important;
border: 1px solid #e2ece2 !important;
box-shadow: 0 10px 30px rgba(16, 80, 41, 0.08) !important;
border-radius: 6px !important;
margin: 0 !important;
}
/* Columns inside primary nav mega menu */
.hf-primary-nav ul li.mega-menu>ul.sub-menu>li {
flex: 1 1 160px !important;
max-width: 180px !important;
list-style: none !important;
margin: 0 !important;
padding: 0 !important;
}
/* Heading of each column */
.hf-primary-nav ul li.mega-menu>ul.sub-menu>li>a {
font-weight: 700 !important;
font-size: 14px !important;
color: var(--primary-color) !important;
border-bottom: 2px solid #e0ece0 !important;
padding: 0 0 8px 0 !important;
margin-bottom: 12px !important;
text-transform: uppercase !important;
letter-spacing: 0.5px !important;
display: block !important;
white-space: normal !important;
background: transparent !important;
border-radius: 0 !important;
border-top: none !important;
border-left: none !important;
border-right: none !important;
}
.hf-primary-nav ul li.mega-menu>ul.sub-menu>li>a:hover {
color: #f8c144 !important;
border-bottom-color: #f8c144 !important;
padding-left: 0 !important;
background: transparent !important;
}
/* Nested lists inside columns */
.hf-primary-nav ul li.mega-menu>ul.sub-menu>li>ul.sub-menu {
position: static !important;
display: block !important;
border: none !important;
box-shadow: none !important;
padding: 0 !important;
margin: 0 !important;
width: 100% !important;
min-width: 0 !important;
background: transparent !important;
}
/* Leaf links inside columns */
.hf-primary-nav ul li.mega-menu>ul.sub-menu>li>ul.sub-menu>li {
width: 100% !important;
}
.hf-primary-nav ul li.mega-menu>ul.sub-menu>li>ul.sub-menu>li>a {
font-weight: 400 !important;
font-size: 13px !important;
color: #555 !important;
padding: 6px 0 !important;
border-bottom: none !important;
white-space: normal !important;
background: transparent !important;
transition: all 0.2s ease !important;
display: block !important;
text-transform: none !important;
}
.hf-primary-nav ul li.mega-menu>ul.sub-menu>li>ul.sub-menu>li>a:hover {
color: var(--primary-color) !important;
padding-left: 6px !important;
background: transparent !important;
}
/* Hotline (phải) */
.hf-hotline {
flex: 0 0 auto;
}
.hf-quick-buy-btn {
display: inline-flex;
align-items: center;
justify-content: center;
background-color: #e50914 !important;
color: #fff !important;
padding: 8px 20px !important;
border-radius: 20px !important;
font-weight: 700;
font-size: 15px !important;
text-decoration: none;
white-space: nowrap;
transition: background-color 0.2s ease, transform 0.2s ease;
}
.hf-quick-buy-btn:hover {
background-color: #c40811 !important;
transform: scale(1.03);
color: #fff !important;
}
/* =====================================================
RESPONSIVE – hide/show helpers
===================================================== */
@media (min-width: 768px) {
.show-for-medium {
display: none !important;
}
.hide-for-medium {
display: flex !important;
}
.hf-mobile-nav {
display: none !important;
}
#wide-nav.header-bottom {
display: block !important;
}
}
@media (max-width: 767px) {
.hide-for-medium {
display: none !important;
}
.show-for-medium {
display: flex !important;
}
.hf-mobile-nav {
display: flex !important;
}
.hf-search {
display: none !important;
}
.hf-cart.hide-for-medium {
display: none !important;
}
#wide-nav.header-bottom {
display: none !important;
}
.hf-logo {
width: 160px;
margin: 0 auto;
display: flex;
justify-content: center;
align-items: center;
}
.hf-logo a {
display: flex;
justify-content: center;
align-items: center;
width: 100%;
}
.hf-logo img {
max-height: 55px;
margin: 0 auto;
display: block;
}
.hf-header-inner {
min-height: 60px;
gap: 8px;
}
.hf-hamburger {
display: flex !important;
flex: 1 0 0;
justify-content: flex-start;
align-items: center;
}
.hf-mobile-nav {
display: flex !important;
flex: 1 0 0;
justify-content: flex-end;
align-items: center;
margin-left: 0;
}
}
/* =====================================================
ICON FONT – Flatsome classes → Font Awesome 6
===================================================== */
.icon-menu:before,
.icon-search:before,
.icon-phone:before,
.icon-angle-right:before,
.icon-shopping-cart:before {
font-family: "Font Awesome 6 Free";
font-weight: 900;
font-style: normal;
display: inline-block;
-webkit-font-smoothing: antialiased;
}
.woocommerce:where(body:not(.woocommerce-uses-block-theme)) .woocommerce-breadcrumb {
font-size: 16px;
color: #000;
margin-top: 10px;
margin-bottom: 20px;
}
.icon-menu:before {
content: "\f0c9";
}
.icon-search:before {
content: "\f002";
}
.icon-phone:before {
content: "\f095";
}
.icon-angle-right:before {
content: "\f105";
}
.icon-shopping-cart:before {
content: "\f07a";
}
.icon-menu,
.icon-search,
.icon-phone,
.icon-angle-right,
.icon-shopping-cart {
font-size: inherit;
line-height: 1;
vertical-align: middle;
}
/* =====================================================
STICKY HEADER
===================================================== */
.header.has-sticky.stuck #masthead {
position: fixed;
top: 0;
left: 50% !important;
transform: translateX(-50%) !important;
width: 100% !important;
max-width: 1230px !important;
right: auto !important;
z-index: 9999;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.12);
min-height: 55px !important;
}
.header.has-sticky.stuck .hf-logo img {
max-height: 50px !important;
}
.header.has-sticky.stuck .hf-mobile-search {
display: none !important;
}
/* Misc */
.header-bg-container.fill,
.header-bg-image.fill,
.header-bg-color.fill {
display: none;
}
.screen-reader-text {
border: 0;
clip: rect(1px, 1px, 1px, 1px);
clip-path: inset(50%);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute !important;
width: 1px;
word-wrap: normal !important;
}
.skip-link.screen-reader-text {
left: -9999px;
}
/* ══════════════════════════════════════════════
PRODUCT PAGE — NEW LAYOUT (product-container > product-main)
Maps to same flex layout as old hungfarm-gallery-col / hungfarm-info-col
══════════════════════════════════════════════ */
/* Container white card */
.product-container {
background: #fff;
border-radius: 4px;
margin-top: 0;
margin-bottom: 0;
}
/* Content row: flex, no wrap */
.product-main .content-row {
display: flex !important;
flex-wrap: nowrap !important;
align-items: flex-start !important;
gap: 20px;
margin: 0 !important;
}
/* Gallery column — left, ~600px like old .hungfarm-gallery-col */
.product-gallery.large-5.col {
flex: 0 0 450px !important;
max-width: 450px !important;
width: 450px !important;
display: flex !important;
flex-wrap: wrap !important;
gap: 10px !important;
position: relative !important;
border-radius: 10px !important;
box-sizing: border-box;
padding: 0 !important;
}
/* Info column — right, grows to fill remaining */
.product-info.summary.large-7.col {
flex: 1 1 0 !important;
max-width: none !important;
width: auto !important;
min-width: 0 !important;
padding: 0 0 0 4px !important;
box-sizing: border-box;
}
/* product-after-summary: normal block flow */
.product-after-summary {
display: block;
margin-top: 24px;
}
/* Ensure badge works with new gallery wrapper */
.product-gallery.large-5.col.position-relative .onsale {
display: none !important;
}
/* ── Responsive: ≤ 960px — stack vertically ── */
@media (max-width: 960px) {
.product-main .content-row {
flex-direction: column !important;
gap: 0 !important;
}
.product-gallery.large-5.col {
flex: unset !important;
width: 100% !important;
max-width: 100% !important;
}
.product-info.summary.large-7.col {
flex: unset !important;
width: 100% !important;
padding: 16px 0 0 !important;
}
}
/* =====================================================
WOOCOMMERCE SINGLE PRODUCT OVERRIDES & UTILITIES
===================================================== */
/* ── 5.1. Product Title ── */
h1.product_title {
font-size: 29px !important;
font-weight: 700 !important;
color: #105029 !important;
text-transform: uppercase !important;
line-height: 1.35 !important;
margin-top: 0 !important;
margin-bottom: 0 !important;
}
span.amount {
white-space: nowrap;
color: #000;
font-weight: bold;
font-size: 14px;
}
.price-wrapper span.amount {
font-size: 18px;
}
/* ── 5.2. Price ── */
.single-product .price {
font-size: 20px !important;
font-weight: 700 !important;
color: #c67c00 !important;
margin-bottom: 12px !important;
display: flex !important;
align-items: baseline !important;
gap: 8px !important;
flex-wrap: wrap;
margin: 0;
margin-top: 10px;
}
.single-product .price del,
.single-product .price del .woocommerce-Price-amount {
font-size: 15px !important;
color: #888 !important;
font-weight: 400 !important;
}
.single-product .price ins,
.single-product .price ins .woocommerce-Price-amount {
text-decoration: none !important;
color: #c67c00 !important;
}
/* ── 5.3. Short Description ── */
.woocommerce-product-details__short-description {
background: #edfff3;
border: 1px solid #e2ece7;
border-radius: 5px;
padding: 5px 5px;
margin-bottom: 0;
font-size: 16px;
line-height: 1.5;
color: #000;
}
.woocommerce-product-details__short-description p {
margin: 0;
}
/* ── 5.4. BẢO HÀNH badge ── */
.custom-badge-baohanh {
position: absolute;
top: 10px;
right: 65px;
z-index: 99;
background: #F6BF25;
color: #fff;
font-size: 14px;
font-weight: 400;
padding: 8px 0px;
line-height: 1.35;
text-align: center;
border-radius: 5px;
pointer-events: none;
width: 130px;
}
/* ── 5.5. Gallery counter ── */
.custom-image-counter {
position: absolute;
bottom: 8px;
right: 8px;
background: rgba(0, 0, 0, 0.5);
color: #fff;
font-size: 12px;
padding: 3px 10px;
border-radius: 12px;
z-index: 5;
pointer-events: none;
}
/* ── 5.6. "CHỌN MẪU CÂY" section label ── */
.cxs-swatches-heading {
display: flex !important;
align-items: center;
gap: 10px;
margin: 5px 0 5px;
font-size: 17px !important;
font-weight: 700 !important;
color: #105029 !important;
text-transform: uppercase;
letter-spacing: 0.4px;
width: 100%;
white-space: nowrap;
}
.cxs-swatches-heading::before,
.cxs-swatches-heading::after {
content: '' !important;
flex: 1;
height: 1.5px;
display: block;
}
.cxs-swatches-heading::before {
background: linear-gradient(to right, transparent, #105029);
}
.cxs-swatches-heading::after {
background: linear-gradient(to left, transparent, #105029);
}
.woocommerce div.product form.cart {
margin-bottom: 15px;
}
.custom-contact-buttons {
margin-bottom: 10px;
}
/* ── 5.7. Vận chuyển row ── */
.custom-shipping-info {
display: flex;
align-items: flex-start;
gap: 10px;
font-size: 16px;
color: #000;
margin-bottom: 0;
padding: 8px 0;
padding-top: 0;
}
.product-summary .variations_button {
padding: 0 !important;
margin-bottom: 10px !important;
}
.custom-shipping-info .shipping-label {
font-weight: 700;
white-space: nowrap;
min-width: 100px;
color: #105029;
font-size: 16px;
}
.single_add_to_cart_button,
.current .breadcrumb-step {
background-color: #105029 !important;
opacity: 1 !important;
margin-bottom: 0 !important;
}
.product-summary .quantity {
margin-bottom: 0 !important;
margin-right: 5px !important;
}
.custom-shipping-info .shipping-value {
color: #000;
line-height: 1.5;
font-size: 16px;
}
/* ── 5.8. Số lượng row ── */
.woocommerce-variation-add-to-cart {
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 12px;
padding: 8px 0 14px;
}
.woocommerce-variation-add-to-cart::before {
content: 'Số lượng:';
display: inline-block;
min-width: 100px;
font-weight: 700;
color: #105029;
font-size: 16px;
flex-shrink: 0;
}
/* Quantity wrapper */
.single-product .quantity.buttons_added {
display: flex !important;
align-items: center !important;
gap: 0 !important;
border: 1.5px solid #ccc;
border-radius: 4px;
overflow: hidden;
background: #fff;
}
/* +/- buttons */
.single-product .quantity.buttons_added .minus,
.single-product .quantity.buttons_added .plus {
width: 32px !important;
height: 38px !important;
min-width: 32px;
background: #f5f5f5 !important;
border: none !important;
font-size: 20px !important;
font-weight: 700 !important;
color: #333 !important;
cursor: pointer;
display: flex !important;
align-items: center !important;
justify-content: center !important;
transition: background 0.15s;
padding: 0 !important;
margin: 0 !important;
line-height: 1 !important;
border-radius: 0 !important;
box-shadow: none !important;
}
.single-product .quantity.buttons_added .minus:hover,
.single-product .quantity.buttons_added .plus:hover {
background: #e0e0e0 !important;
color: #111 !important;
}
/* Quantity number input */
.single-product .quantity.buttons_added input.qty {
width: 48px !important;
height: 38px !important;
text-align: center !important;
border: none !important;
border-left: 1px solid #ccc !important;
border-right: 1px solid #ccc !important;
border-radius: 0 !important;
font-size: 15px !important;
font-weight: 600 !important;
color: #333 !important;
background: #fff !important;
padding: 0 !important;
box-shadow: none !important;
-moz-appearance: textfield;
}
.single-product .quantity.buttons_added input.qty::-webkit-inner-spin-button,
.single-product .quantity.buttons_added input.qty::-webkit-outer-spin-button {
-webkit-appearance: none;
margin: 0;
}
/* Add to cart button (MUA NGAY) */
.single-product .single_add_to_cart_button.button {
flex: 1;
background: #105029 !important;
border-color: #105029 !important;
color: #fff !important;
border-radius: 4px !important;
height: 38px !important;
font-size: 14px !important;
font-weight: 700 !important;
text-transform: uppercase !important;
letter-spacing: 1px !important;
transition: background 0.15s !important;
padding: 0 18px !important;
line-height: 38px !important;
max-width: 200px;
}
.single-product .single_add_to_cart_button.button:hover {
background: #105029 !important;
border-color: #105029 !important;
}
/* ── 5.9. Nút MUA SỈ / MUA LẺ ── */
.custom-contact-buttons {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 8px;
margin-bottom: 18px;
}
.mua-si-btn,
.mua-le-btn {
display: flex !important;
align-items: center !important;
justify-content: center !important;
gap: 6px;
background: #c62828 !important;
border-color: #c62828 !important;
border-radius: 5px !important;
font-weight: 700 !important;
font-size: 16px !important;
padding: 12px 10px !important;
text-transform: none !important;
color: #fff !important;
transition: background 0.15s !important;
margin-bottom: 0;
}
.mua-si-btn:hover,
.mua-le-btn:hover {
background: #b71c1c !important;
border-color: #b71c1c !important;
color: #fff !important;
}
/* ── 5.10. HÙNG FARM CAM KẾT ── */
.hung-farm-cam-ket {
margin-bottom: 5px;
}
.hung-farm-cam-ket .cam-ket-title {
font-size: 17px;
font-weight: 700;
color: #105029;
text-transform: uppercase;
letter-spacing: 0.4px;
margin-bottom: 0;
display: flex;
align-items: center;
gap: 10px;
white-space: nowrap;
}
.hung-farm-cam-ket .cam-ket-title::before,
.hung-farm-cam-ket .cam-ket-title::after {
content: '';
flex: 1;
height: 1px;
display: block;
}
.hung-farm-cam-ket .cam-ket-title::before {
background: linear-gradient(to right, transparent, #105029);
}
.hung-farm-cam-ket .cam-ket-title::after {
background: linear-gradient(to left, transparent, #105029);
}
.hung-farm-cam-ket .cam-ket-items {
display: flex;
justify-content: space-around;
flex-wrap: wrap;
gap: 6px;
background: inherit;
border: none;
border-radius: 6px;
padding: 5px 1px 15px 0p;
margin-top: 8px;
}
.product_meta {
font-size: 16px !important;
margin-bottom: 0px !important;
color: #105029;
font-weight: bold;
}
.hung-farm-cam-ket .cam-ket-item {
display: flex;
align-items: center;
gap: 7px;
font-size: 16px;
color: #000;
font-weight: 400;
}
.hung-farm-cam-ket .cam-ket-item .check-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 20px;
height: 20px;
background: #105029;
border-radius: 50%;
flex-shrink: 0;
}
.hung-farm-cam-ket .cam-ket-item .check-icon::before {
content: '✓';
color: #fff;
font-size: 11px;
font-weight: 900;
line-height: 1;
}
/* ── 5.11. Kết nối với chúng tôi ── */
.cxs-social-connect {
display: flex;
align-items: center;
gap: 12px;
padding: 0;
margin-bottom: 14px;
font-size: 12.5px;
color: #888;
}
.cxs-social-connect .social-label {
font-size: 16px;
color: #105029;
white-space: nowrap;
font-weight: bold;
}
.cxs-social-connect .social-links {
display: flex;
gap: 8px;
align-items: center;
}
.cxs-social-connect .social-link {
display: inline-flex;
align-items: center;
justify-content: center;
width: 28px;
height: 28px;
border-radius: 4px;
text-decoration: none;
font-size: 16px;
font-weight: 700;
transition: opacity 0.15s;
color: #fff !important;
}
.cxs-social-connect .social-link:hover {
opacity: 0.85;
}
.cxs-social-connect .social-link.fb {
background: #1877f2;
}
.cxs-social-connect .social-link.yt {
background: #ff0000;
}
.cxs-social-connect .social-link.zalo {
background: #0068ff;
font-size: 11px;
font-weight: 800;
}
.cxs-social-connect .social-link.tiktok {
background: #010101;
}
.wpcf7-form.custom-inline-form {
margin-bottom: 0px !important;
}
/* ── 5.12. Quick Lead Form ── */
.custom-lead-form-block {
background-color: #105029 !important;
padding: 15px !important;
border-radius: 4px !important;
margin-top: 10px !important;
}
.custom-lead-form-block p {
color: #ffffff !important;
font-size: 16px !important;
margin-bottom: 10px !important;
font-style: italic !important;
margin: 0px;
}
.custom-lead-form-block .form-flex-row {
display: flex !important;
gap: 8px !important;
flex-wrap: wrap !important;
}
.custom-lead-form-block input[type="text"],
.custom-lead-form-block input[type="tel"] {
flex: 1 !important;
min-width: 110px !important;
padding: 9px 12px !important;
border: 1px solid rgba(255, 255, 255, 0.2) !important;
border-radius: 4px !important;
background: rgba(255, 255, 255) !important;
color: #000 !important;
font-size: 15px !important;
height: auto !important;
margin: 0 !important;
}
.custom-lead-form-block input[type="text"]::placeholder,
.custom-lead-form-block input[type="tel"]::placeholder {
color: #000 !important;
}
.custom-lead-form-block input[type="text"]:focus,
.custom-lead-form-block input[type="tel"]:focus {
border-color: rgba(255, 255, 255, 0.6) !important;
background: rgba(255, 255, 255, 0.18) !important;
outline: none !important;
}
.custom-lead-form-block button[type="submit"],
.custom-lead-form-block .qf-submit {
background: #f9a825 !important;
color: #1a1a1a !important;
border: none !important;
border-radius: 4px !important;
padding: 0px 18px !important;
font-weight: 700 !important;
font-size: 17px !important;
cursor: pointer !important;
white-space: nowrap !important;
height: auto !important;
transition: background 0.15s !important;
min-height: auto;
}
.custom-lead-form-block button[type="submit"]:hover,
.custom-lead-form-block .qf-submit:hover {
background: #f57f17 !important;
}
/* ── 5.13. Responsive — product layout ── */
@media (max-width: 900px) {
.product-main .content-row {
flex-wrap: wrap !important;
}
.product-gallery.large-5.col {
flex: 0 0 100% !important;
max-width: 100% !important;
width: 100% !important;
border-right: none !important;
border-bottom: 1px solid #f0f0f0;
border-radius: 4px 4px 0 0 !important;
}
.product-info.summary.large-7.col {
flex: 0 0 100% !important;
max-width: 100% !important;
width: 100% !important;
border-radius: 0 0 4px 4px !important;
}
}
@media (max-width: 600px) {
.woocommerce-variation-add-to-cart::before {
display: none;
}
}
/* =============================================
6. WOOCOMMERCE — UTILITIES
============================================= */
/* Fix gallery opacity */
.woocommerce-product-gallery {
opacity: 1 !important;
}
.woocommerce-product-gallery figure img {
opacity: 1 !important;
}
/* Hide "XÓA" reset link */
.single-product .reset_variations,
.reset_variations,
a.reset_variations {
display: none !important;
visibility: hidden !important;
}
/* Variations table — hide label column, full-width value */
body.single-product .woocommerce table.variations td.label,
body.woocommerce-page table.variations td.label,
table.variations td.label {
display: none !important;
}
.product-main {
padding: 0 !important;
}
/* Also hide the WooCommerce default attribute label row */
.woocommerce-variation-add-to-cart .variations_button,
table.variations tr th.label,
table.variations tr td.label {
display: none !important;
}
body.single-product .woocommerce table.variations td.value,
table.variations td.value {
width: 100% !important;
padding: 0 !important;
display: block !important;
}
body.single-product .woocommerce table.variations,
body.single-product .woocommerce table.variations tbody,
body.single-product .woocommerce table.variations tr,
table.variations,
table.variations tbody,
table.variations tr {
display: block !important;
width: 100% !important;
border: none !important;
}
/* ── 6b. Product Tabs — khớp thiết kế mẫu ── */
.woocommerce-tabs.wc-tabs-wrapper {
background: #fff;
border-radius: 4px;
margin-top: 16px;
overflow: hidden;
}
.woocommerce-tabs ul.wc-tabs,
ul.tabs.wc-tabs {
display: flex !important;
flex-wrap: nowrap !important;
overflow-x: auto;
border-bottom: 2px solid #e8e8e8 !important;
padding: 0 !important;
margin: 0 !important;
background: #fff;
list-style: none;
}
.woocommerce-tabs ul.wc-tabs li,
ul.tabs.wc-tabs li {
float: none !important;
display: block !important;
margin: 0 !important;
border: none !important;
border-radius: 0 !important;
background: transparent !important;
}
.woocommerce-tabs ul.wc-tabs li a,
ul.tabs.wc-tabs li a {
display: block !important;
padding: 5px 22px !important;
font-size: 18px !important;
font-weight: 700 !important;
color: #000 !important;
text-transform: uppercase !important;
letter-spacing: 0.3px !important;
border-bottom: 3px solid transparent !important;
margin-bottom: 0px !important;
white-space: nowrap !important;
background: transparent !important;
transition: color 0.15s, border-color 0.15s !important;
text-decoration: none !important;
}
.woocommerce-tabs ul.wc-tabs li a:hover,
ul.tabs.wc-tabs li a:hover {
color: #c62828 !important;
}
.woocommerce-tabs ul.wc-tabs li.active a,
ul.tabs.wc-tabs li.active a {
color: #105029 !important;
border-bottom-color: #c62828 !important;
background: transparent !important;
}
.woocommerce-tabs .tab-panels,
.woocommerce-tabs .panel {
padding: 0 !important;
border: none !important;
}
.woocommerce-tabs .woocommerce-Tabs-panel h2,
.woocommerce-tabs .woocommerce-Tabs-panel h3,
.woocommerce-tabs .woocommerce-Tabs-panel h4,
.woocommerce-tabs .panel.entry-content h2,
.woocommerce-tabs .panel.entry-content h3,
.woocommerce-tabs .panel.entry-content h4 {
color: #105029 !important;
font-weight: 700 !important;
}
/* ── 6c. Spec / Attributes Table ── */
.woocommerce-tabs table.shop_attributes,
.woocommerce-tabs .wc-tab table {
width: 100% !important;
border-collapse: collapse !important;
margin-bottom: 14px !important;
}
.woocommerce-tabs table.shop_attributes td,
.woocommerce-tabs table.shop_attributes th,
.woocommerce-tabs .wc-tab table td,
.woocommerce-tabs .wc-tab table th {
border: 1px solid #e0e0e0 !important;
font-size: 16px !important;
vertical-align: middle !important;
padding: 5px 15px;
color: #000 !important;
}
.woocommerce-tabs table.shop_attributes th,
.woocommerce-tabs .wc-tab table th {
font-weight: 700 !important;
width: 32% !important;
background: #f4f9f1 !important;
text-align: left !important;
}
.woocommerce-tabs table.shop_attributes tr:nth-child(even) td,
.woocommerce-tabs .wc-tab table tr:nth-child(even) td:first-child {
background: #f8f8f8 !important;
}
/* ── 6e. Gallery ── */
.product-gallery .woocommerce-product-gallery {
opacity: 1 !important;
width: 100%;
}
.product-gallery .flickity-viewport:not(.flex-control-thumbs .flickity-viewport),
.product-gallery .flex-viewport:not(.flex-control-thumbs .flex-viewport) {
height: auto !important;
aspect-ratio: 3 / 4 !important;
overflow: hidden !important;
border-radius: 4px 4px 0 0;
background: #eef3eb;
}
.product-gallery .flex-control-thumbs .flickity-viewport {
aspect-ratio: auto !important;
border-radius: 0 !important;
background: transparent !important;
}
.product-gallery .flickity-slider .woocommerce-product-gallery__image,
.product-gallery .flickity-slider .woocommerce-product-gallery__image>a {
height: 100% !important;
display: block;
}
.product-gallery .flex-viewport .slides,
.product-gallery .flex-viewport .slides li {
height: 100% !important;
}
/* Ảnh: fill và cắt bằng object-fit */
.product-gallery .flickity-slider .woocommerce-product-gallery__image img:not(.zoomImg),
.product-gallery .flex-viewport .slides li img:not(.zoomImg),
.product-gallery .flex-viewport .slides li a img:not(.zoomImg) {
width: 100% !important;
height: 100% !important;
object-fit: cover !important;
object-position: center top;
display: block;
}
/* ── Thumbnail strip ── */
.product-gallery .flex-control-nav.flex-control-thumbs {
display: flex !important;
flex-wrap: nowrap !important;
overflow-x: auto !important;
gap: 8px !important;
padding: 4px 0 !important;
margin: 10px 0 0 0 !important;
list-style: none !important;
scrollbar-width: none !important;
/* Firefox */
-ms-overflow-style: none !important;
/* IE and Edge */
-webkit-overflow-scrolling: touch !important;
/* smooth momentum scrolling on iOS */
position: relative !important;
}
.product-gallery .flex-control-nav.flex-control-thumbs::-webkit-scrollbar {
display: none !important;
/* Chrome, Safari, Opera */
}
.product-gallery .flex-control-thumbs li {
flex: 0 0 calc(25% - 6px) !important;
width: calc(25% - 6px) !important;
max-width: calc(25% - 6px) !important;
margin: 0 !important;
padding: 0 !important;
border-radius: 4px !important;
overflow: hidden !important;
border: 2px solid transparent !important;
cursor: pointer !important;
transition: border-color 0.15s !important;
list-style: none !important;
aspect-ratio: 3 / 4 !important;
box-sizing: border-box !important;
}
.product-gallery .flex-control-thumbs li img {
width: 100% !important;
height: 100% !important;
object-fit: cover !important;
display: block !important;
opacity: 1 !important;
transition: opacity 0.15s !important;
}
.product-gallery .flex-control-thumbs li.active-thumb img,
.product-gallery .flex-control-thumbs li.flex-active img,
.product-gallery .flex-control-thumbs li img.flex-active,
.product-gallery .flex-control-thumbs li:hover img {
opacity: 1 !important;
}
.product-gallery .flex-control-thumbs li.active-thumb,
.product-gallery .flex-control-thumbs li.flex-active,
.product-gallery .flex-control-thumbs li:has(img.flex-active),
.product-gallery .flex-control-thumbs li:hover {
border-color: #105029 !important;
}
/* ── 6f. Product meta (danh mục) styling ── */
.woocommerce-product-details__short-description+.product_meta,
.woocommerce div.product .product_meta {
font-size: 16px !important;
color: #105029 !important;
margin-bottom: 14px;
line-height: 1.9;
}
.woocommerce div.product .product_meta a {
color: #105029 !important;
}
.woocommerce div.product .product_meta a:hover {
text-decoration: underline !important;
}
/* If they use flickity arrows */
.product-gallery .flickity-prev-next-button {
width: 28px !important;
height: 28px !important;
}
.product-gallery .flickity-prev-next-button.previous {
left: 0px !important;
}
.product-gallery .flickity-prev-next-button.next {
right: 0px !important;
}
/* TRIGGER FIX */
.product-gallery .woocommerce-product-gallery__trigger {
position: absolute !important;
top: 15px !important;
right: 15px !important;
left: auto !important;
z-index: 99 !important;
display: flex !important;
align-items: center;
justify-content: center;
width: 26px !important;
height: 26px !important;
background-color: #ffffff !important;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23105029' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'%3E%3C/circle%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'%3E%3C/line%3E%3Cline x1='11' y1='8' x2='11' y2='14'%3E%3C/line%3E%3Cline x1='8' y1='11' x2='14' y2='11'%3E%3C/line%3E%3C/svg%3E") !important;
background-repeat: no-repeat !important;
background-position: center !important;
background-size: 18px !important;
border-radius: 50% !important;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
border: 1px solid rgba(0, 0, 0, 0.05) !important;
opacity: 1 !important;
text-decoration: none !important;
transition: transform 0.25s ease, box-shadow 0.25s ease, background-color 0.25s ease !important;
text-indent: -9999px !important;
overflow: hidden !important;
}
.hungfarm-related-section {
margin-top: 0 !important;
margin-bottom: 0 !important;
padding-bottom: 20px !important;
}
.product-gallery .woocommerce-product-gallery__trigger:hover {
background-color: #105029 !important;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'%3E%3C/circle%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'%3E%3C/line%3E%3Cline x1='11' y1='8' x2='11' y2='14'%3E%3C/line%3E%3Cline x1='8' y1='11' x2='14' y2='11'%3E%3C/line%3E%3C/svg%3E") !important;
transform: scale(1.08) !important;
box-shadow: 0 6px 16px rgba(0, 0, 0, 0.25) !important;
}
.product-gallery .woocommerce-product-gallery__trigger::before {
display: none !important;
}
/* MAIN SLIDER ARROWS VISIBILITY */
.product-gallery .flickity-prev-next-button {
display: block !important;
opacity: 1 !important;
background: #ffffff;
border-radius: 100%;
min-height: auto !important;
padding: 10px !important;
}
/* COUNTER FIX */
.custom-image-counter {
position: absolute !important;
bottom: 10px !important;
right: 10px !important;
background: rgba(0, 0, 0, 0.6) !important;
color: #fff !important;
padding: 4px 8px !important;
border-radius: 4px !important;
font-size: 12px !important;
z-index: 99 !important;
pointer-events: none !important;
}
/* =============================================
7. GLOBAL BOXED LAYOUT
============================================= */
body {
background-color: #f1f1f1 !important;
}
#wrapper {
max-width: 1230px !important;
margin: 0 auto !important;
background-color: #fff !important;
padding-left: 30px !important;
padding-right: 30px !important;
box-sizing: border-box !important;
}
@media (max-width: 767px) {
#wrapper {
padding-left: 15px !important;
padding-right: 15px !important;
}
}
/* ── VERTICAL CATEGORY MENU HOVER OVERRIDE ── */
/* Commented out so homepage and other pages share the same hover vertical menu behavior */
/* body:not(.home) #mega_menu {
display: none !important;
}
body:not(.home) .ot-vm-hover:hover #mega_menu {
display: block !important;
} */
/* ── MEGA MENU FOR PRIMARY NAVIGATION ── */
#wide-nav.header-bottom {
position: relative !important;
}
.hf-primary-nav ul>li.mega-menu {
position: static !important;
}
.hf-primary-nav ul>li.mega-menu>ul.sub-menu {
display: none;
position: absolute !important;
top: 100% !important;
left: 50% !important;
transform: translateX(-50%) !important;
right: auto !important;
width: 1000px !important;
background: #fff !important;
border-radius: 6px !important;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15) !important;
padding: 20px 20px !important;
z-index: 9999 !important;
box-sizing: border-box !important;
flex-direction: row !important;
gap: 20px !important;
border-top: 3px solid #105029 !important;
}
.hf-primary-nav ul>li.mega-menu:hover>ul.sub-menu {
display: flex !important;
}
.hf-primary-nav ul>li.mega-menu>ul.sub-menu>li {
flex: 1 !important;
max-width: none !important;
list-style: none !important;
}
.hf-primary-nav ul>li.mega-menu>ul.sub-menu>li>a {
font-weight: 700 !important;
font-size: 16px !important;
color: #105029 !important;
text-transform: uppercase !important;
border-bottom: 2px solid #eee !important;
padding: 0 0 8px 0 !important;
margin-bottom: 12px !important;
display: block !important;
pointer-events: none;
}
.hf-primary-nav ul>li.mega-menu>ul.sub-menu>li>ul.sub-menu {
display: block !important;
position: static !important;
box-shadow: none !important;
padding: 0 !important;
min-width: auto !important;
background: transparent !important;
}
.hf-primary-nav ul>li.mega-menu>ul.sub-menu>li>ul.sub-menu li {
width: 100% !important;
}
.hf-primary-nav ul>li.mega-menu>ul.sub-menu>li>ul.sub-menu li a {
padding: 6px 0 !important;
border: none !important;
font-size: 16px !important;
color: #000 !important;
text-transform: none !important;
font-weight: 400 !important;
transition: color 0.2s, padding-left 0.2s !important;
}
.hf-primary-nav ul>li.mega-menu>ul.sub-menu>li>ul.sub-menu li a:hover {
color: #105029 !important;
padding-left: 6px !important;
background: transparent !important;
}
/* ── CHEVRON ICONS FOR DROPDOWN MENUS ── */
.hf-primary-nav ul>li.menu-item-has-children>a {
padding-right: 26px !important;
position: relative !important;
}
.hf-primary-nav ul>li.menu-item-has-children>a::after {
content: "\f107" !important;
font-family: "Font Awesome 6 Free", "FontAwesome" !important;
font-weight: 900 !important;
position: absolute !important;
right: 8px !important;
top: 50% !important;
transform: translateY(-50%) !important;
font-size: 11px !important;
opacity: 1 !important;
transition: opacity 0.2s !important;
}
.hf-primary-nav ul>li.menu-item-has-children .sub-menu a::after {
top: 40% !important;
}
.hf-primary-nav ul>li.menu-item-has-children:hover>a::after {
opacity: 1 !important;
}
#mega_menu li.menu-item-has-children>a {
padding-right: 28px !important;
position: relative !important;
}
#mega_menu li.menu-item-has-children>a::after {
content: "\f105" !important;
font-family: "Font Awesome 6 Free", "FontAwesome" !important;
font-weight: 900 !important;
position: absolute !important;
right: 12px !important;
top: 50% !important;
transform: translateY(-50%) !important;
font-size: 11px !important;
opacity: 0.6 !important;
transition: opacity 0.2s, right 0.2s !important;
}
#mega_menu li.menu-item-has-children:hover>a::after {
opacity: 1 !important;
right: 8px !important;
}
/* ── PREVENT HOVER LOSS GAP BRIDGE FOR SUB-MENUS ── */
.hf-primary-nav ul>li>ul.sub-menu::before {
content: "" !important;
position: absolute !important;
top: -20px !important;
left: 0 !important;
right: 0 !important;
height: 20px !important;
background: transparent !important;
display: block !important;
}
/* =========================================================================
13. TYPOGRAPHY & ENTRY CONTENT STYLES (TinyMCE / Editor Formatting)
========================================================================= */
.entry-content,
.hungfarm-tab-content-inner {
font-size: 16px;
line-height: 1.7;
color: #000;
}
/* Headings Styling */
.entry-content h2,
.hungfarm-tab-content-inner h2 {
font-size: 26px;
color: var(--primary-color, #105029);
font-weight: 700;
position: relative;
}
.entry-content h3,
.hungfarm-tab-content-inner h3 {
font-size: 23px;
color: var(--accent-color, #105029);
font-weight: 600;
}
.entry-content h4,
.hungfarm-tab-content-inner h4 {
font-size: 20px;
color: #222;
font-weight: 600;
}
.entry-content h5,
.hungfarm-tab-content-inner h5 {
font-size: 18px;
color: #444;
font-weight: 600;
margin-top: 20px;
margin-bottom: 10px;
}
.entry-content h6,
.hungfarm-tab-content-inner h6 {
font-size: 16px;
color: #555;
font-weight: 600;
}
/* Paragraph spacing */
.entry-content p,
.hungfarm-tab-content-inner p {
margin-bottom: 10px;
margin-top: 0;
}
table tr td p {
margin: 0 !important;
}
table tr td,
table tr {
height: auto !important;
}
/* Unordered & Ordered Lists */
.entry-content ul,
.hungfarm-tab-content-inner ul {
list-style: none;
padding-left: 20px;
margin-bottom: 22px;
}
.entry-content ul li,
.hungfarm-tab-content-inner ul li {
position: relative;
padding-left: 15px;
margin-bottom: 0;
}
.entry-content ol,
.hungfarm-tab-content-inner ol {
padding-left: 20px;
margin-bottom: 22px;
}
.entry-content ol li,
.hungfarm-tab-content-inner ol li {
margin-bottom: 8px;
padding-left: 4px;
}
/* Blockquote Styling */
.entry-content blockquote,
.hungfarm-tab-content-inner blockquote {
background: #f4f9f4;
border-left: 4px solid var(--accent-color, #105029);
padding: 18px 24px;
margin: 25px 0;
border-radius: 0 8px 8px 0;
}
.entry-content blockquote p,
.hungfarm-tab-content-inner blockquote p {
font-style: italic;
font-size: 16px;
color: #444;
line-height: 1.6;
margin-bottom: 8px;
}
.entry-content blockquote cite,
.hungfarm-tab-content-inner blockquote cite {
display: block;
font-size: 13px;
color: #777;
font-weight: 500;
text-align: right;
}
/* Table Styling */
.entry-content table,
.hungfarm-tab-content-inner table {
width: 100%;
border-collapse: collapse;
margin: 25px 0;
font-size: 15px;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.03);
border-radius: 6px;
overflow: hidden;
}
.entry-content table th,
.hungfarm-tab-content-inner table th {
background-color: var(--primary-color, #105029);
color: #fff;
font-weight: 600;
padding: 12px 16px;
text-align: left;
}
.entry-content table td,
.hungfarm-tab-content-inner table td {
padding: 12px 16px;
border-bottom: 1px solid #eee;
color: #555;
}
.entry-content table tr:nth-child(even),
.hungfarm-tab-content-inner table tr:nth-child(even) {
background-color: #fcfdfe;
}
.entry-content table tr:hover,
.hungfarm-tab-content-inner table tr:hover {
background-color: #f1f7f2;
}
/* Image blocks */
.entry-content .wp-block-image,
.hungfarm-tab-content-inner .wp-block-image {
margin: 25px 0;
text-align: center;
}
.entry-content .wp-block-image img,
.hungfarm-tab-content-inner .wp-block-image img {
max-width: 100%;
height: auto;
border-radius: 8px;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.06);
}
.entry-content .wp-block-image figcaption,
.hungfarm-tab-content-inner .wp-block-image figcaption {
margin-top: 10px;
font-size: 13px;
color: #777;
font-style: italic;
}
/* Standard WordPress & TinyMCE alignment styles */
.entry-content .alignleft,
.hungfarm-tab-content-inner .alignleft {
float: left;
margin: 5px 20px 20px 0;
max-width: 50%;
}
.entry-content .alignright,
.hungfarm-tab-content-inner .alignright {
float: right;
margin: 5px 0 20px 20px;
max-width: 50%;
}
.entry-content .aligncenter,
.hungfarm-tab-content-inner .aligncenter {
display: block;
margin: 10px auto 25px auto;
clear: both;
}
.entry-content .alignjustify,
.hungfarm-tab-content-inner .alignjustify {
text-align: justify;
}
/* Clearfix for floated elements in entry-content */
.entry-content::after,
.hungfarm-tab-content-inner::after {
content: "";
display: table;
clear: both;
}
/* Horizontal Rule */
.entry-content hr,
.hungfarm-tab-content-inner hr {
border: 0;
height: 1px;
background: #e0eae2;
margin: 30px 0;
}
/* Preformatted and Code blocks */
.entry-content pre,
.hungfarm-tab-content-inner pre {
background: #f5f5f5;
padding: 15px;
border-radius: 4px;
font-family: Courier, monospace;
font-size: 14px;
line-height: 1.5;
overflow-x: auto;
margin-bottom: 20px;
border: 1px solid #e0e0e0;
}
.entry-content code,
.hungfarm-tab-content-inner code {
background: #f5f5f5;
padding: 2px 6px;
border-radius: 3px;
font-family: Courier, monospace;
font-size: 14px;
color: #c7254e;
}
/* Links */
.entry-content a,
.hungfarm-tab-content-inner a {
color: #fff;
text-decoration: underline;
transition: color 0.15s;
}
.entry-content a:hover,
.hungfarm-tab-content-inner a:hover {
color: var(--primary-color, #105029);
}
/* Link Button Styling */
.entry-content a.button,
.hungfarm-tab-content-inner a.button {
display: inline-block;
background-color: var(--accent-color, #105029);
color: #fff !important;
padding: 10px 24px;
border-radius: 4px;
font-weight: 600;
text-decoration: none !important;
transition: background-color 0.15s, transform 0.1s;
margin-top: 10px;
margin-bottom: 10px;
}
.entry-content a.button:hover,
.hungfarm-tab-content-inner a.button:hover {
background-color: var(--primary-color, #105029);
color: #fff !important;
transform: translateY(-1px);
}
/* Video Containers */
.entry-content .video-container,
.hungfarm-tab-content-inner .video-container {
position: relative;
padding-bottom: 56.25%;
/* 16:9 aspect ratio */
height: 0;
overflow: hidden;
max-width: 100%;
margin: 25px 0;
border-radius: 8px;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.06);
}
.entry-content .video-container iframe,
.hungfarm-tab-content-inner .video-container iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border: 0;
}
.entry-content video,
.hungfarm-tab-content-inner video {
max-width: 100%;
height: auto;
border-radius: 8px;
margin: 25px 0;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.06);
}
/* Accordion FAQs */
.entry-content details,
.hungfarm-tab-content-inner details {
background: #f8faf8;
border: 1px solid #e2ece2;
border-radius: 6px;
margin-bottom: 12px;
transition: background-color 0.15s, border-color 0.15s;
}
.entry-content details[open],
.hungfarm-tab-content-inner details[open] {
background: #fff;
border-color: snow;
padding: 0;
}
.entry-content details summary,
.hungfarm-tab-content-inner details summary {
font-weight: 600;
font-size: 16px;
color: #fff;
cursor: pointer;
outline: none;
user-select: none;
list-style: none;
/* Hide standard browser marker */
position: relative;
padding-right: 24px;
}
/* Custom expand indicator */
.entry-content details summary::after,
.hungfarm-tab-content-inner details summary::after {
content: "+";
position: absolute;
right: 0;
top: 50%;
transform: translateY(-50%);
font-size: 18px;
color: var(--accent-color, #105029);
transition: transform 0.2s;
}
.entry-content details[open] summary::after,
.hungfarm-tab-content-inner details[open] summary::after {
content: "−";
transform: translateY(-50%) rotate(180deg);
}
.entry-content details p,
.hungfarm-tab-content-inner details p {
margin-top: 10px;
margin-bottom: 0;
font-size: 15px;
color: #555;
}
/* =========================================================================
14. TABLE OF CONTENTS (TOC) STYLES
========================================================================= */
.cxs-toc-container {
margin: 25px 0;
max-width: 60%;
border-radius: 6px;
overflow: hidden;
font-family: 'Roboto', sans-serif;
}
.cxs-toc-header {
background-color: var(--primary-color, #105029);
color: #fff;
padding: 12px 18px;
display: flex;
justify-content: space-between;
align-items: center;
cursor: pointer;
user-select: none;
border-radius: 6px 6px 0 0;
}
.cxs-toc-header-left {
display: flex;
align-items: center;
gap: 10px;
}
.cxs-toc-header-left i {
font-size: 16px;
}
.cxs-toc-header-left span {
font-weight: 700;
font-size: 15px;
letter-spacing: 0.5px;
}
.cxs-toc-header-right i {
font-size: 14px;
transition: transform 0.2s;
}
.cxs-toc-body {
background: #fff;
border: 1px solid #e0eae2;
border-top: none;
border-radius: 0 0 6px 6px;
padding: 15px 18px;
max-height: 250px;
overflow-y: auto;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04);
}
/* Custom scrollbar styling */
.cxs-toc-body::-webkit-scrollbar {
width: 6px;
}
.cxs-toc-body::-webkit-scrollbar-track {
background: #f1f1f1;
border-radius: 3px;
}
.cxs-toc-body::-webkit-scrollbar-thumb {
background: #ccc;
border-radius: 3px;
}
.cxs-toc-body::-webkit-scrollbar-thumb:hover {
background: var(--accent-color, #105029);
}
.cxs-toc-list {
list-style: none !important;
margin: 0 !important;
padding: 0 !important;
}
.cxs-toc-list li.toc-item {
margin: 0 !important;
padding: 0 !important;
line-height: 1.4 !important;
}
.cxs-toc-list li.toc-item::before {
display: none !important;
/* Hide list style icons */
}
.cxs-toc-list li.toc-item a {
text-decoration: none !important;
display: inline-block;
transition: color 0.15s;
}
.cxs-toc-list li.toc-h2 {
font-weight: 500;
font-size: 15px;
margin-bottom: 10px !important;
}
.cxs-toc-list li.toc-h2 a {
color: #222 !important;
}
.cxs-toc-list li.toc-h3 {
padding-left: 20px !important;
font-size: 14px;
font-weight: 500;
margin-bottom: 8px !important;
}
.cxs-toc-list li.toc-h3 a {
color: #555 !important;
}
.cxs-toc-list li.toc-item.active a {
color: #AF0B0B !important;
font-weight: 700 !important;
}
.cxs-toc-list li.toc-item a:hover {
color: var(--accent-color, #105029) !important;
}
/* Floating Table of Contents elements */
.cxs-floating-toc-trigger {
position: fixed;
top: 50%;
right: 25px;
transform: translateY(-50%);
width: 48px;
height: 48px;
border-radius: 50%;
background-color: var(--accent-color, #105029);
color: #fff;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
z-index: 9999;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
transition: background-color 0.2s, transform 0.2s;
}
.cxs-floating-toc-trigger:hover {
background-color: var(--primary-color, #105029);
transform: translateY(-50%) scale(1.05);
}
.cxs-floating-toc-trigger i {
font-size: 20px;
}
.cxs-floating-toc-panel {
position: fixed;
top: 50%;
right: 85px;
transform: translateY(-50%);
width: 320px;
max-height: 380px;
background: #fff;
border: 1px solid #e0eae2;
border-radius: 8px;
box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15);
z-index: 9998;
display: flex;
flex-direction: column;
overflow: hidden;
font-family: 'Roboto', sans-serif;
}
.cxs-floating-toc-header {
background-color: var(--primary-color, #105029);
color: #fff;
padding: 10px 15px;
display: flex;
justify-content: space-between;
align-items: center;
font-weight: 700;
font-size: 13px;
letter-spacing: 0.5px;
}
.cxs-floating-toc-header i.fa-xmark {
cursor: pointer;
font-size: 16px;
opacity: 0.8;
transition: opacity 0.2s;
}
.cxs-floating-toc-header i.fa-xmark:hover {
opacity: 1;
}
.cxs-floating-toc-body {
padding: 15px;
overflow-y: auto;
flex: 1;
}
.cxs-floating-toc-body::-webkit-scrollbar {
width: 5px;
}
.cxs-floating-toc-body::-webkit-scrollbar-track {
background: #f1f1f1;
}
.cxs-floating-toc-body::-webkit-scrollbar-thumb {
background: #ccc;
border-radius: 3px;
}
.cxs-floating-toc-body::-webkit-scrollbar-thumb:hover {
background: var(--accent-color, #105029);
}
/* Ensure floating list has same spacing rules but fits small panel */
.cxs-floating-toc-body .cxs-toc-list li.toc-h2 {
font-size: 14px;
margin-bottom: 8px !important;
}
.cxs-floating-toc-body .cxs-toc-list li.toc-h3 {
font-size: 13px;
margin-bottom: 6px !important;
}
/* ==========================================================================
CAYXINH HOMEPAGE REDESIGN — Inspired by Caycanhhanoi.com
========================================================================== */
/* Always open category menu on homepage desktop - commented out so it only shows on hover */
/* @media (min-width: 1101px) {
.home #mega_menu {
display: block !important;
box-shadow: none !important;
border-top: none !important;
border-radius: 0 0 4px 4px !important;
}
} */
/* Banner/Slider two-column grid on home - modified to make the banner full-width */
.home-banner-grid {
display: grid;
grid-template-columns: 1fr;
gap: 5px;
margin-top: 0;
margin-bottom: 25px;
align-items: start;
width: calc(100% + 60px) !important;
max-width: 1230px !important;
margin-left: -30px !important;
margin-right: -30px !important;
}
@media (max-width: 767px) {
.home-banner-grid {
width: calc(100% + 30px) !important;
margin-left: -15px !important;
margin-right: -15px !important;
}
}
.home-banner-menu-placeholder {
display: none;
}
.home-banner-slider {
overflow: hidden;
}
.home-banner-slider img {
width: 100%;
height: auto;
display: block;
}
/*
@media (min-width: 1101px) {
.home-banner-slider {
height: 360px;
/* Matches the 9-item vertical category menu height */
/*}
.home-banner-slider img {
height: 100% !important;
object-fit: cover;
}
}
*/
@media (max-width: 1100px) {
.home-banner-grid {
grid-template-columns: 1fr;
}
.home-banner-menu-placeholder {
display: none;
}
}
/* Section Header & Title styles */
.cayxinh-section-header {
border-bottom: 2px solid #ececec;
display: flex;
justify-content: space-between;
align-items: flex-end;
margin-top: 35px;
margin-bottom: 20px;
padding-bottom: 6px;
}
.cayxinh-section-title {
font-family: 'Roboto', sans-serif;
font-size: 22px;
font-weight: 700;
color: #105029;
margin: 0;
text-transform: uppercase;
display: inline-block;
position: relative;
padding-bottom: 6px;
margin-bottom: -8px;
border-bottom: 2px solid var(--primary-color);
}
.cayxinh-section-more {
font-size: 15px;
font-weight: normal;
color: var(--primary-color);
text-decoration: none;
display: inline-flex;
align-items: center;
gap: 4px;
transition: color 0.2s;
}
.cayxinh-section-more:hover {
color: var(--accent-color);
}
/* Product Card Grid */
.cayxinh-products-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 20px;
margin-bottom: 30px;
}
.cayxinh-products-grid--5 {
grid-template-columns: repeat(5, 1fr);
}
.cayxinh-products-grid--3 {
grid-template-columns: repeat(3, 1fr);
}
/* Product Card */
.cayxinh-card {
background: #fff;
border: 1px solid #ececec;
border-radius: 5px;
padding: 10px;
display: flex;
flex-direction: column;
transition: box-shadow 0.3s ease, border-color 0.3s ease;
}
.cayxinh-card:hover {
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
border-color: var(--primary-color);
}
.cayxinh-card__img-wrap {
position: relative;
display: block;
overflow: hidden;
border-radius: 4px;
aspect-ratio: 1/1;
background: #fafafa;
}
.cayxinh-card__img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.35s ease;
}
.cayxinh-card:hover .cayxinh-card__img {
transform: scale(1.05);
}
.cayxinh-card__badge {
position: absolute;
top: 8px;
left: 8px;
background: var(--primary-color);
color: #fff;
font-size: 11px;
font-weight: 500;
padding: 2px 6px;
border-radius: 3px;
text-transform: uppercase;
z-index: 2;
}
.cayxinh-card__title {
font-family: 'Roboto', sans-serif;
font-size: 16px;
font-weight: 700;
color: #105029;
margin: 10px 0 5px;
text-align: center;
height: 40px;
overflow: hidden;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
line-height: 1.25;
}
.cayxinh-card__title a {
color: #105029;
text-decoration: none;
}
.cayxinh-card__title a:hover {
color: var(--primary-color);
}
.cayxinh-card__stars {
color: #ffb700;
font-size: 13px;
text-align: center;
margin-bottom: 6px;
line-height: 1;
}
.cayxinh-card__price {
font-size: 16px;
font-weight: normal;
color: var(--danger-color);
text-align: center;
margin-bottom: 12px;
margin-top: auto;
}
.cayxinh-card__price del {
color: #a0a0a0;
font-size: 13px;
margin-right: 5px;
}
.cayxinh-card__price ins {
text-decoration: none;
}
.cayxinh-card__btn {
display: block;
width: 100%;
border: 1px solid #105029;
background: transparent;
color: #105029 !important;
font-size: 14px;
font-weight: normal;
text-align: center;
padding: 6px 12px;
border-radius: 30px;
text-transform: none;
transition: all 0.2s ease;
}
.cayxinh-card__btn:hover {
background: #105029;
color: #fff !important;
}
@media (max-width: 1024px) {
.cayxinh-products-grid,
.cayxinh-products-grid--5,
.cayxinh-products-grid--3 {
grid-template-columns: repeat(3, 1fr);
gap: 15px;
}
}
@media (max-width: 768px) {
.cayxinh-products-grid,
.cayxinh-products-grid--5,
.cayxinh-products-grid--3 {
grid-template-columns: repeat(2, 1fr);
gap: 10px;
}
.cayxinh-card__title {
font-size: 14px;
height: 36px;
}
}
/* Two-column Blog / Care Guide Split Columns */
.cayxinh-blog-split {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 30px;
margin-bottom: 30px;
}
.cayxinh-blog-col {
display: flex;
flex-direction: column;
}
.cayxinh-post-list {
display: flex;
flex-direction: column;
gap: 15px;
}
.cayxinh-post-item {
display: grid;
grid-template-columns: 120px 1fr;
gap: 15px;
background: #fff;
border: 1px solid #ececec;
border-radius: 5px;
padding: 10px;
transition: box-shadow 0.3s ease;
}
.cayxinh-post-item:hover {
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
}
.cayxinh-post-item__img-wrap {
overflow: hidden;
border-radius: 4px;
aspect-ratio: 4/3;
background: #f9f9f9;
}
.cayxinh-post-item__img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.3s ease;
}
.cayxinh-post-item:hover .cayxinh-post-item__img {
transform: scale(1.05);
}
.cayxinh-post-item__content {
display: flex;
flex-direction: column;
justify-content: center;
}
.cayxinh-post-item__title {
font-family: 'Roboto', sans-serif;
font-size: 15px;
font-weight: 700;
color: #105029;
margin: 0 0 5px;
line-height: 1.3;
}
.cayxinh-post-item__title a {
color: #105029;
text-decoration: none;
}
.cayxinh-post-item__title a:hover {
color: var(--primary-color);
}
.cayxinh-post-item__meta {
font-size: 12px;
color: #888;
margin-bottom: 5px;
}
.cayxinh-post-item__excerpt {
font-size: 13px;
color: #555;
margin: 0;
line-height: 1.3;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
@media (max-width: 768px) {
.cayxinh-blog-split {
grid-template-columns: 1fr;
gap: 20px;
}
}
/* Reviews and Customer Feedback */
.hungfarm-reviews-section {
background: #fff;
border: 1px solid #ececec;
border-radius: 6px;
padding: 30px 25px;
margin-top: 30px;
margin-bottom: 0;
padding-top: 0;
}
/* ═══════════════════════════════════════════════
HOMEPAGE HORIZONTAL GRID & CARD CUSTOM STYLES
═══════════════════════════════════════════════ */
/* Homepage specific Product Grid (4 columns on desktop) */
.container1 .hungfarm-top-trees-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 20px;
margin-bottom: 30px;
}
/* Homepage specific Product Card (Vertical Layout, Flush Image) */
.container1 .hungfarm-tt-card {
display: flex;
flex-direction: column;
align-items: stretch;
gap: 0;
padding: 0;
border: 1px solid #ececec;
border-radius: 8px;
background: #fff;
transition: box-shadow 0.3s ease, border-color 0.3s ease;
box-sizing: border-box;
overflow: hidden;
height: 100%;
}
.container1 .hungfarm-tt-card:hover {
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
border-color: #105029;
}
/* Flush image wrapper */
.container1 .hungfarm-tt-card__img-wrap {
flex: none;
width: 100%;
height: auto;
aspect-ratio: 3 / 4;
border-radius: 0;
margin: 0;
}
.container1 .hungfarm-tt-card__img-link {
display: block;
width: 100%;
height: 100%;
}
.container1 .hungfarm-tt-card__img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: transform 0.35s ease;
}
.container1 .hungfarm-tt-card:hover .hungfarm-tt-card__img {
transform: scale(1.05);
}
/* Content block below the image */
.container1 .hungfarm-tt-card__content {
flex: 1;
display: flex;
flex-direction: column;
align-items: flex-start;
text-align: left;
padding: 12px 14px 14px;
gap: 7px;
box-sizing: border-box;
width: 100%;
}
/* Product title */
.container1 .hungfarm-tt-card__name {
font-family: 'Roboto', sans-serif;
font-size: 15.5px;
font-weight: 700;
margin: 0;
line-height: 1.3;
text-align: left;
height: auto;
display: block;
}
.container1 .hungfarm-tt-card__name a:hover {
color: #105029 !important;
}
/* Stars rating */
.container1 .hungfarm-tt-card__stars {
color: #ff9e03;
font-size: 13px;
text-align: left;
margin: 2px 0 0;
line-height: 1;
display: block;
}
/* Price */
.container1 .hungfarm-tt-card__price {
font-size: 16px;
font-weight: 700;
color: #111;
text-align: left;
margin-top: auto;
margin-bottom: 4px;
}
.container1 .hungfarm-tt-card__price del {
color: #a0a0a0;
font-size: 13px;
margin-right: 5px;
}
.container1 .hungfarm-tt-card__price ins {
text-decoration: none;
}
/* Button 'Gọi báo giá' as solid green block */
.container1 .hungfarm-tt-card__badge--below {
display: flex;
align-items: center;
justify-content: center;
background: #208d45;
color: #fff !important;
font-size: 14px;
font-weight: 600;
padding: 10px 12px;
border-radius: 6px;
text-transform: none;
border: none;
transition: background 0.2s ease;
margin-top: auto;
text-decoration: none;
width: 100%;
box-sizing: border-box;
}
.container1 .hungfarm-tt-card__badge--below:hover {
background: #193a1c;
color: #fff !important;
text-decoration: none !important;
}
.container1 .hungfarm-top-trees-section {
border-bottom: none;
margin-bottom: 0;
padding-bottom: 0px;
padding-top: 0;
}
.container1 .hungfarm-top-trees-heading {
position: relative;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
margin: 30px 0 20px;
border-bottom: none;
}
.hungfarm-top-trees-section.hungfarm-parent-cat-section {
margin-bottom: 30px !important;
}
.container1 .hungfarm-top-trees-heading__text {
display: flex;
align-items: center;
justify-content: center;
gap: 15px;
width: 100%;
color: #105029;
font-size: 20px;
font-weight: 700;
text-transform: uppercase;
margin: 0;
}
.container1 .hungfarm-top-trees-heading__text::before,
.container1 .hungfarm-top-trees-heading__text::after {
content: '';
flex: 1;
border-bottom: 1px solid #ececec;
}
.container1 .hungfarm-top-trees-heading__text a {
color: #105029;
text-decoration: none;
}
.container1 .hungfarm-top-trees-heading__text a:hover {
color: #105029;
}
.container1 .hungfarm-top-trees-heading__more {
position: absolute;
right: 0;
font-size: 13px;
font-weight: 500;
color: #fff !important;
background: #105029;
padding: 6px 14px;
border-radius: 20px;
text-transform: none;
text-decoration: none;
display: inline-flex;
align-items: center;
gap: 4px;
z-index: 2;
transition: background-color 0.2s ease;
}
.container1 .hungfarm-top-trees-heading__more:hover {
background-color: #0b3d1f;
color: #fff !important;
text-decoration: none !important;
}
/* Accessibility Screen Reader Text */
.screen-reader-text {
border: 0;
clip: rect(1px, 1px, 1px, 1px);
clip-path: inset(50%);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute !important;
width: 1px;
word-wrap: normal !important;
}
/* Responsive Overrides */
@media (max-width: 1024px) {
.container1 .hungfarm-top-trees-grid {
grid-template-columns: repeat(3, 1fr);
gap: 15px;
}
}
@media (max-width: 768px) {
.container1 .hungfarm-top-trees-grid {
grid-template-columns: repeat(2, 1fr);
gap: 15px;
}
.container1 .hungfarm-top-trees-heading__text {
font-size: 18px;
}
.container1 .hungfarm-top-trees-heading__more {
display: none;
}
}
@media (max-width: 480px) {
.container1 .hungfarm-top-trees-grid {
grid-template-columns: repeat(2, 1fr);
gap: 10px;
}
}
/* Homepage Category Section Headings */
.container1 .hungfarm-cat-heading {
display: flex;
justify-content: space-between;
align-items: flex-end;
border-bottom: 2px solid #ececec;
margin-top: 35px;
margin-bottom: 20px;
padding-bottom: 0px;
position: relative;
}
.container1 .hungfarm-cat-heading__text {
font-family: 'Roboto', sans-serif;
font-size: 20px;
font-weight: 700;
margin: 0;
text-transform: uppercase;
display: inline-block;
position: relative;
padding-bottom: 6px;
margin-bottom: -2px;
/* Overlap border-bottom */
border-bottom: 3px solid #105029;
/* Thick green underline */
}
.container1 .hungfarm-cat-heading__text a {
color: #105029;
text-decoration: none;
}
.container1 .hungfarm-cat-heading__text a:hover {
color: #105029;
}
.container1 .hungfarm-cat-heading__more {
font-size: 13px;
font-weight: 500;
color: #fff !important;
background: #105029;
padding: 6px 16px;
border-radius: 20px;
text-decoration: none;
display: inline-flex;
align-items: center;
gap: 4px;
margin-bottom: 6px;
transition: background-color 0.2s ease;
}
.container1 .hungfarm-cat-heading__more:hover {
background: #7eb338;
color: #fff !important;
text-decoration: none !important;
}
/* Tránh ghi đè từ .container1 cho các danh mục sản phẩm trên trang chủ (để giống hệt trang danh mục sản phẩm) */
.container1 .hungfarm-parent-cat-section .hungfarm-tt-card {
border-radius: 8px;
border: 1px solid #e2e2e2;
padding: 0;
overflow: hidden;
display: flex;
flex-direction: column;
background: #fff;
gap: 0;
align-items: unset;
}
.container1 .hungfarm-parent-cat-section .hungfarm-tt-card__img-wrap {
border-radius: 0;
width: 100%;
aspect-ratio: 3 / 4;
}
.container1 .hungfarm-parent-cat-section .hungfarm-tt-card__stars {
text-align: left;
margin: 12px 12px 4px 12px;
color: #ff9e03;
}
.container1 .hungfarm-parent-cat-section .hungfarm-tt-card__stars:empty {
display: none;
}
.container1 .hungfarm-parent-cat-section .hungfarm-tt-card__name {
text-align: left;
font-size: 16px;
color: #000;
margin: 10px 12px 6px 12px;
line-height: 1.3;
display: block;
height: 44px;
overflow: hidden;
font-family: 'Roboto', sans-serif;
}
.container1 .hungfarm-parent-cat-section .hungfarm-tt-card__stars:empty+.hungfarm-parent-cat-section .hungfarm-tt-card__name,
.container1 .hungfarm-parent-cat-section .hungfarm-tt-card__img-wrap+.hungfarm-tt-card__name {
margin-top: 12px;
}
.container1 .hungfarm-parent-cat-section .hungfarm-tt-card__name a {
color: #105e45 !important;
}
.container1 .hungfarm-parent-cat-section .hungfarm-tt-card__name a:hover {
color: var(--primary-color, #105029) !important;
}
.container1 .hungfarm-parent-cat-section .hungfarm-tt-card__price {
text-align: left;
color: #111;
font-size: 16px;
font-weight: 700;
margin: 4px 12px 12px 12px;
}
.container1 .hungfarm-parent-cat-section .hungfarm-tt-card__price span.amount {
color: #222 !important;
}
.container1 .hungfarm-parent-cat-section .hungfarm-tt-card__badge--below {
background: #208d45;
border: none;
color: #fff !important;
font-size: 14px;
font-weight: 600;
padding: 10px 12px;
border-radius: 6px;
display: flex;
align-items: center;
justify-content: center;
gap: 6px;
text-transform: none;
margin: 0 auto 15px auto;
width: 86%;
box-sizing: border-box;
}
.container1 .hungfarm-parent-cat-section .hungfarm-tt-card__badge--below:hover {
background: #193a1c;
color: #fff !important;
text-decoration: none !important;
}
.container1 .hungfarm-parent-cat-section .hungfarm-tt-card__badge--below svg {
color: #ff3b30;
fill: currentColor;
}
/* ═══ Contact Page Styles ═══ */
.hungfarm-contact-map-full {
width: 100%;
margin-bottom: 40px;
}
.hungfarm-contact-map-full iframe {
width: 100%;
height: 450px;
border: 0;
display: block;
}
.hungfarm-contact-page {
margin-bottom: 60px;
margin-top: 30px;
}
.hungfarm-contact-layout {
display: flex !important;
gap: 50px !important;
margin-bottom: 60px;
max-width: 1170px;
margin-left: auto;
margin-right: auto;
padding: 0 15px;
box-sizing: border-box;
}
.hungfarm-contact-info-col {
flex: 0 0 calc(55% - 25px);
max-width: calc(55% - 25px);
}
.hungfarm-contact-form-col {
flex: 0 0 calc(45% - 25px);
max-width: calc(45% - 25px);
}
.hungfarm-contact-section-title {
font-size: 28px;
font-weight: 700;
color: #105029;
margin-top: 0;
margin-bottom: 20px;
text-align: center;
}
.hungfarm-contact-intro-text {
font-size: 15px;
line-height: 1.6;
color: #333333;
margin-bottom: 30px;
}
.hungfarm-contact-intro-text .brand-domain {
color: #105029;
font-style: italic;
}
.hungfarm-contact-intro-text .highlight-text {
font-weight: bold;
font-style: italic;
margin-top: 15px;
}
.hungfarm-contact-details-list {
display: flex;
flex-direction: column;
gap: 25px;
}
.hungfarm-contact-detail-item {
display: flex;
gap: 20px;
align-items: flex-start;
}
.hungfarm-contact-icon-badge {
width: 60px;
height: 60px;
background-color: #105029;
color: #ffffff;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.hungfarm-contact-icon-badge svg {
width: 32px;
height: 32px;
}
.hungfarm-contact-item-text {
font-size: 14px;
line-height: 1.6;
color: #333333;
}
.hungfarm-contact-item-text .item-title {
display: block;
font-size: 18px;
font-weight: bold;
color: #105029;
margin-bottom: 8px;
}
.hungfarm-contact-item-text p {
margin: 0 0 6px 0 !important;
line-height: 1.6 !important;
}
.hungfarm-contact-item-text p:last-child {
margin-bottom: 0 !important;
}
.hungfarm-contact-item-text .badge-label {
font-weight: bold;
color: #105029;
}
.hungfarm-contact-item-text .label-italic {
font-style: italic;
}
.hungfarm-contact-item-text .text-italic {
font-style: italic;
color: #666666;
}
.hungfarm-contact-item-text a {
color: #333333;
text-decoration: none;
}
.hungfarm-contact-item-text a:hover {
color: #105029;
text-decoration: underline;
}
.hungfarm-contact-item-text .phone-number-large {
font-size: 20px;
font-weight: bold;
color: #333333;
margin: 0;
}
.hungfarm-contact-form-title {
font-size: 24px;
font-weight: bold;
color: #105029;
margin-top: 0;
margin-bottom: 25px;
text-align: center;
line-height: 1.4;
}
/* Contact Form elements layout & styling */
.hungfarm-contact-form-col label {
display: block;
font-weight: 500;
color: #333333;
margin-bottom: 8px;
font-size: 15px;
}
.hungfarm-contact-form-col input[type="text"],
.hungfarm-contact-form-col input[type="email"],
.hungfarm-contact-form-col input[type="tel"],
.hungfarm-contact-form-col textarea {
width: 100%;
padding: 10px 15px;
border: 1.5px solid #105029 !important;
border-radius: 4px;
background-color: #ffffff;
font-size: 15px;
color: #333333;
box-sizing: border-box;
transition: border-color 0.2s, box-shadow 0.2s;
outline: none;
margin-bottom: 0;
}
.hungfarm-contact-form-col input[type="text"]:focus,
.hungfarm-contact-form-col input[type="email"]:focus,
.hungfarm-contact-form-col input[type="tel"]:focus,
.hungfarm-contact-form-col textarea:focus {
border-color: #105029 !important;
box-shadow: 0 0 5px rgba(140, 202, 70, 0.4);
}
.hungfarm-contact-form-col .form-group {
margin-bottom: 20px;
}
.hungfarm-contact-form-container form p {
margin-bottom: 20px !important;
}
.hungfarm-contact-form-container .wpcf7-form-control-wrap {
display: block;
width: 100%;
}
.hungfarm-contact-submit-btn,
.hungfarm-contact-form-col input[type="submit"] {
background-color: #AF0B0B !important;
color: #ffffff !important;
border: none !important;
padding: 10px 25px !important;
font-size: 16px !important;
font-weight: bold !important;
border-radius: 3px !important;
cursor: pointer !important;
text-transform: uppercase !important;
transition: background-color 0.2s !important;
display: inline-block !important;
box-shadow: none !important;
}
.hungfarm-contact-submit-btn:hover,
.hungfarm-contact-form-col input[type="submit"]:hover {
background-color: #8f0808 !important;
}
.hungfarm-contact-social-section {
display: flex;
flex-direction: column;
align-items: flex-end;
margin-top: 35px;
gap: 10px;
}
.social-text-label {
font-weight: bold;
font-style: italic;
color: #AF0B0B;
font-size: 15px;
}
.social-media-icons-list {
display: flex;
gap: 15px;
align-items: center;
}
.social-icon-item {
color: #888888;
transition: color 0.2s;
display: flex;
align-items: center;
justify-content: center;
}
.social-icon-item:hover {
color: #105029;
}
.social-icon-item svg {
width: 22px;
height: 22px;
fill: currentColor;
}
/* Responsive Breakpoints */
@media (max-width: 991px) {
.hungfarm-contact-layout {
gap: 30px !important;
}
.hungfarm-contact-info-col {
flex: 0 0 calc(50% - 15px);
max-width: calc(50% - 15px);
}
.hungfarm-contact-form-col {
flex: 0 0 calc(50% - 15px);
max-width: calc(50% - 15px);
}
}
@media (max-width: 767px) {
.hungfarm-contact-layout {
flex-direction: column !important;
gap: 40px !important;
}
.hungfarm-contact-info-col,
.hungfarm-contact-form-col {
flex: 0 0 100%;
max-width: 100%;
}
.hungfarm-contact-social-section {
align-items: center;
}
}
/* Hide variation selected name next to swatches label */
.cxs-selected-name {
display: none !important;
}
/* ═══ Home Intro & Services Styles ═══ */
.hungfarm-home-intro-section {
margin-top: 30px;
margin-bottom: 30px;
text-align: center;
}
.hungfarm-home-intro-box {
background-color: #fffaf0;
border-left: 5px solid #ffa500;
padding: 20px 25px;
text-align: left;
border-radius: 0 4px 4px 0;
box-sizing: border-box;
}
.hungfarm-home-intro-box p {
font-size: 15px;
line-height: 1.6;
color: #333333;
margin: 0 0 10px 0 !important;
}
.hungfarm-home-intro-box p:last-child {
margin-bottom: 0 !important;
}
.hungfarm-home-intro-box .highlight-quote {
font-size: 16px;
font-weight: bold;
}
.hungfarm-home-intro-box .text-green {
color: #105029;
font-weight: bold;
}
.hungfarm-services-heading {
display: flex;
align-items: center;
gap: 15px;
margin-bottom: 30px;
}
.hungfarm-services-heading .square-badge {
width: 45px;
height: 25px;
background-color: #af0b0b;
display: inline-block;
}
.hungfarm-services-heading h2 {
font-size: 26px;
font-weight: bold;
color: #105029;
margin: 0;
text-transform: uppercase;
}
.hungfarm-services-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
margin-bottom: 35px;
}
.hungfarm-service-card {
position: relative;
border-radius: 8px;
overflow: hidden;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.06);
background-color: #ffffff;
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.hungfarm-service-card:hover {
transform: translateY(-5px);
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.12);
}
.service-img-wrap {
width: 100%;
height: 200px;
overflow: hidden;
}
.service-img-wrap img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: transform 0.5s ease;
}
.hungfarm-service-card:hover .service-img-wrap img {
transform: scale(1.08);
}
.service-title-overlay {
position: absolute;
bottom: 15px;
left: auto;
right: auto;
background: rgb(255 255 255 / 65%);
padding: 10px 15px;
border-radius: 50px;
text-align: center;
backdrop-filter: blur(2px);
border: 1px solid rgba(255, 255, 255, 0.3);
left: 50%;
transform: translateX(-50%);
width: 290px;
}
.service-title-overlay h3 {
font-size: 16px;
font-weight: bold;
color: #105029;
margin: 0;
text-transform: none;
}
/* Call to action */
.hungfarm-services-cta-wrap {
text-align: center;
margin-top: 30px;
}
.hungfarm-services-cta-btn {
display: inline-block;
background-color: #105029;
color: #ffffff !important;
font-size: 18px;
font-weight: bold;
padding: 12px 35px;
border-radius: 6px;
text-decoration: none;
transition: background-color 0.2s ease, transform 0.2s ease;
box-shadow: 0 4px 10px rgba(255, 165, 0, 0.3);
}
.hungfarm-services-cta-btn:hover {
background-color: #e69500;
transform: translateY(-2px);
box-shadow: 0 6px 15px rgba(255, 165, 0, 0.4);
text-decoration: none !important;
}
.hungfarm-services-cta-btn i {
margin-right: 8px;
}
/* Responsive grid */
@media (max-width: 991px) {
.hungfarm-services-grid {
grid-template-columns: repeat(2, 1fr);
gap: 10px;
}
.service-img-wrap {
height: 180px;
}
.service-title-overlay h3 {
font-size: 14px !important;
}
}
@media (max-width: 575px) {
.hungfarm-home-intro-heading {
font-size: 20px;
}
.hungfarm-services-heading h2 {
font-size: 18px;
}
.hungfarm-services-cta-btn {
font-size: 15px;
padding: 10px 20px;
}
}
/* PC vs Mobile Category Banners responsive styling */
.hungfarm-cat-banner__mobile {
display: none !important;
}
.hungfarm-cat-banner__pc {
display: block !important;
}
@media (max-width: 850px) {
.hungfarm-cat-banner {
height: auto !important;
/* Allow mobile banner to scale naturally */
}
.hungfarm-cat-banner__pc {
display: none !important;
}
.hungfarm-cat-banner__mobile {
display: block !important;
}
}
/* ═══════════════════════════════════════════════════════════
CATEGORY PAGE LAYOUT AND SIDEBAR REDESIGN
═══════════════════════════════════════════════════════════ */
/* Category banner inside container */
.hungfarm-cat-banner {
max-width: 1230px !important;
width: calc(100% + 60px) !important;
margin-left: -30px !important;
margin-right: -30px !important;
margin-top: 0px !important;
margin-bottom: 10px !important;
overflow: hidden !important;
border-radius: 0 !important;
height: auto !important;
}
.hungfarm-cat-banner__img {
display: block;
width: 100% !important;
max-width: 100% !important;
height: auto !important;
border-radius: 0 !important;
object-fit: cover !important;
}
@media (max-width: 767px) {
.hungfarm-cat-banner {
width: calc(100% + 30px) !important;
margin-left: -15px !important;
margin-right: -15px !important;
border-radius: 0 !important;
}
}
/* Breadcrumbs inside category container */
.hungfarm-breadcrumb-in-cat {
padding: 10px 0 16px;
font-size: 13.5px;
color: #666;
}
.hungfarm-breadcrumb-in-cat ol {
list-style: none;
display: flex;
flex-wrap: wrap;
gap: 6px;
margin: 0;
padding: 0;
}
.hungfarm-breadcrumb-in-cat li {
display: inline-flex;
align-items: center;
}
.hungfarm-breadcrumb-in-cat li:not(:last-child)::after {
content: "›";
margin-left: 6px;
margin-right: 6px;
color: #e4e4df;
}
.hungfarm-breadcrumb-in-cat a {
color: #105029;
text-decoration: none;
}
.hungfarm-breadcrumb-in-cat a:hover {
text-decoration: underline;
}
.hungfarm-cat-layout {
display: grid;
grid-template-columns: 268px 1fr;
gap: 15px;
padding-bottom: 40px;
margin-top: 25px;
border-top: 1px solid #105029;
padding-top: 25px;
}
/* Sidebar */
.hungfarm-cat-sidebar {
align-self: start;
}
.hungfarm-sidebar-head {
background: #105029;
color: #fff;
font-family: "Roboto", sans-serif;
font-weight: 700;
font-size: 16px;
padding: 12px 16px;
border-radius: 10px 10px 0 0;
letter-spacing: .02em;
}
.hungfarm-cat-tree {
border: 1px solid #e4e4df;
border-top: 0;
border-radius: 0 0 10px 10px;
overflow: hidden;
background: #fff;
}
.hungfarm-cat-tree ul {
list-style: none;
margin: 0;
padding: 0;
}
.hungfarm-cat-tree>ul>li>a {
display: block;
padding: 12px 16px;
font-family: "Roboto", sans-serif;
font-weight: 700;
font-size: 16px;
color: #000;
border-top: 1px solid #e4e4df;
transition: background 0.2s, color 0.2s;
}
.hungfarm-cat-tree>ul>li:first-child>a {
border-top: 0;
}
.hungfarm-cat-tree .children li a,
.hungfarm-cat-tree .sub-menu li a {
display: block;
padding: 9px 16px 9px 30px;
font-size: 16px;
color: #000;
border-top: 1px solid #e4e4df;
font-family: "Roboto", sans-serif;
font-weight: 400;
transition: background 0.2s, color 0.2s;
}
.hungfarm-cat-tree a:hover {
background: #eef4ea;
color: #105029;
text-decoration: none;
}
.hungfarm-cat-tree a[aria-current="page"],
.hungfarm-cat-tree .current-menu-item>a {
color: #105029;
font-weight: 700;
background: #eef4ea;
box-shadow: inset 3px 0 0 #105029;
}
/* Sidebar Call to Action Widget */
.hungfarm-sidebar-cta {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
aspect-ratio: 1/1;
margin-top: 16px;
padding: 18px;
border-radius: 10px;
color: #fff !important;
gap: 4px;
background: linear-gradient(150deg, #105029 0%, #173b22 100%);
box-shadow: 0 6px 18px rgba(16, 80, 41, 0.25);
text-decoration: none !important;
transition: transform 0.2s, box-shadow 0.2s, background 0.2s;
}
.hungfarm-sidebar-cta:hover {
transform: translateY(-2px);
box-shadow: 0 8px 24px rgba(16, 80, 41, 0.35);
background: linear-gradient(150deg, #135e31 0%, #105029 100%);
}
.hungfarm-sidebar-cta__icon {
font-size: 30px;
line-height: 1;
margin-bottom: 6px;
display: flex;
align-items: center;
justify-content: center;
color: #ff3b30;
}
.hungfarm-sidebar-cta__icon svg {
fill: currentColor;
}
.hungfarm-sidebar-cta__lead {
font-size: 13px;
opacity: .9;
color: #dfe9df;
}
.hungfarm-sidebar-cta__title {
font-family: "Roboto", sans-serif;
font-weight: 800;
font-size: 21px;
letter-spacing: .02em;
color: #fff;
}
.hungfarm-sidebar-cta__phone {
font-family: "Roboto", sans-serif;
font-weight: 700;
font-size: 23px;
background: #fff;
color: #105029;
border-radius: 8px;
padding: 6px 14px;
margin-top: 6px;
transition: background 0.2s;
}
.hungfarm-sidebar-cta:hover .hungfarm-sidebar-cta__phone {
background: #f1f1eb;
}
.hungfarm-sidebar-cta__note {
font-size: 12.5px;
opacity: .9;
color: #dfe9df;
margin-top: 6px;
}
/* Right Content Area */
.hungfarm-cat-content {
min-width: 0;
}
/* Stacking for smaller viewports */
@media (max-width: 880px) {
.hungfarm-cat-layout {
grid-template-columns: 1fr;
gap: 24px;
}
.hungfarm-sidebar-cta {
aspect-ratio: auto;
height: auto;
padding: 24px 18px;
}
}
/* =========================================
CUSTOM RESPONSIVENESS IMPROVEMENTS (MOBILE & TABLET)
========================================= */
/* Mobile search bar style */
.hf-mobile-search {
background: #fff;
padding: 8px 0;
border-top: 1px solid #f2f2f2;
border-bottom: 1px solid #ececec;
}
.hf-mobile-search .hf-search-form {
display: flex;
align-items: center;
background: #f7f7f7;
border: 1px solid #ececec;
border-radius: 20px;
padding: 0 15px;
margin: 0 10px;
}
.hf-mobile-search input[type="search"] {
width: 100%;
padding: 8px 10px;
border: none;
background: transparent;
font-size: 14px;
outline: none;
color: #000;
}
.hf-mobile-search button[type="submit"] {
background: none;
border: none;
padding: 6px;
cursor: pointer;
color: #105029;
display: flex;
align-items: center;
}
h1 {
font-size: 29px !important;
}
h2 {
font-size: 26px !important;
}
h3 {
font-size: 23px !important;
}
h4 {
font-size: 20px !important;
}
h5 {
font-size: 18px !important;
}
h6 {
font-size: 16px !important;
}
h1 span,
h2 span,
h3 span,
h4 span,
h5 span,
h6 span {
font-size: inherit !important;
}
/* Horizontal scrolling tabs for mobile/tablet */
@media (max-width: 768px) {
.hungfarm-ptabs-nav,
.hungfarm-posts-tabs {
display: flex !important;
justify-content: flex-start !important;
flex-wrap: nowrap !important;
overflow-x: auto !important;
-webkit-overflow-scrolling: touch;
gap: 10px !important;
padding: 5px 15px 8px 15px !important;
margin-left: -15px !important;
margin-right: -15px !important;
scrollbar-width: thin !important;
scrollbar-color: rgba(16, 80, 41, 0.4) transparent !important;
width: calc(100% + 30px) !important;
box-sizing: border-box;
}
.hungfarm-ptabs-nav::-webkit-scrollbar,
.hungfarm-posts-tabs::-webkit-scrollbar {
display: block !important;
height: 2px !important;
}
.hungfarm-ptabs-nav::-webkit-scrollbar-track,
.hungfarm-posts-tabs::-webkit-scrollbar-track {
background: transparent !important;
}
.hungfarm-ptabs-nav::-webkit-scrollbar-thumb,
.hungfarm-posts-tabs::-webkit-scrollbar-thumb {
background: rgba(16, 80, 41, 0.4) !important;
border-radius: 2px !important;
}
.hungfarm-ptabs-btn,
.hungfarm-posts-tab-btn {
flex: 0 0 auto !important;
white-space: nowrap !important;
}
.hf-container {
padding: 10px 15px !important;
}
.hf-mobile-search.show-for-medium .hf-container {
padding-top: 0 !important;
}
.hf-cart-link {
margin-right: 8px;
}
.hf-mobile-search .hf-search-form {
margin: 0;
}
.hf-mobile-search {
background: #fff;
padding: 0;
border-top: none;
border-bottom: 1px solid #ececec;
}
h1 {
font-size: 22px !important;
}
h2 {
font-size: 20px !important;
}
h3 {
font-size: 18px !important;
}
h4 {
font-size: 17px !important;
}
h5 {
font-size: 16px !important;
}
h6 {
font-size: 15px !important;
}
.service-title-overlay {
width: 230px;
}
.hungfarm-services-cta-btn {
font-size: 12px !important;
padding: 10px 15px !important;
}
.service-title-overlay {
width: 230px;
padding: 5px 10px;
}
.hungfarm-tt-card__name {
padding: 0 !important;
}
.container1 .hungfarm-tt-card__content {
gap: 0;
}
.hungfarm-tt-card__price {
padding: 0 0px 5px;
}
/* Product card badge buttons (Thêm vào giỏ hàng, Gọi báo giá) */
.hungfarm-tt-card__badge--below {
font-size: 12px !important;
padding: 10px 8px !important;
}
span.amount {
font-size: 11px;
}
.container1 .hungfarm-parent-cat-section .hungfarm-tt-card__price {
font-size: 12px;
}
.container1 .hungfarm-parent-cat-section .hungfarm-tt-card__name {
height: 38px;
}
.container1 .hungfarm-parent-cat-section .hungfarm-tt-card__price {
margin: 4px 12px 5px 12px;
}
/* Horizontal scrolling slider for posts on mobile */
.hungfarm-pn-grid {
display: flex !important;
flex-wrap: nowrap !important;
overflow-x: auto !important;
-webkit-overflow-scrolling: touch;
gap: 16px !important;
padding: 5px 15px 8px 15px !important;
margin-left: -15px !important;
margin-right: -15px !important;
width: calc(100% + 30px) !important;
box-sizing: border-box;
scrollbar-width: thin !important;
scrollbar-color: rgba(16, 80, 41, 0.4) transparent !important;
margin-bottom: 20px !important;
}
.hungfarm-pn-grid::-webkit-scrollbar {
display: block !important;
height: 2px !important;
}
.hungfarm-pn-grid::-webkit-scrollbar-track {
background: transparent !important;
}
.hungfarm-pn-grid::-webkit-scrollbar-thumb {
background: rgba(16, 80, 41, 0.4) !important;
border-radius: 2px !important;
}
.hungfarm-pn-card {
flex: 0 0 50% !important;
width: 50% !important;
white-space: normal !important;
}
.nl-box {
background: var(--primary-color);
border-top: none;
padding: 15px 15px;
color: #fff;
text-align: center;
}
.nl-inner {
flex-direction: column !important;
align-items: center !important;
text-align: center !important;
gap: 15px !important;
}
.nl-text {
width: 100% !important;
text-align: center !important;
flex: 0 0 auto !important;
min-width: 0 !important;
}
.nl-heading {
font-size: 16px !important;
text-align: center !important;
line-height: 1.3 !important;
}
.nl-form {
width: 100% !important;
gap: 10px !important;
}
.nl-row-top,
.nl-row-bottom {
flex-direction: row !important;
width: 100% !important;
gap: 10px !important;
}
.nl-field {
width: 100% !important;
height: 38px !important;
border-radius: 15px !important;
padding: 12px 12px !important;
box-sizing: border-box !important;
}
.nl-row-top .nl-field {
width: calc(50% - 5px) !important;
}
.nl-row-bottom .nl-field-wide {
width: calc(80% - 5px) !important;
flex: 1 !important;
}
.nl-field .nl-icon {
display: none !important;
}
.nl-field input {
text-align: center !important;
height: 100% !important;
font-size: 13px !important;
}
.nl-submit {
width: 100% !important;
height: 38px !important;
line-height: 30px !important;
border-radius: 15px !important;
font-size: 13px !important;
padding: 0 !important;
box-sizing: border-box !important;
}
.nl-row-bottom .nl-submit {
width: auto !important;
padding: 0 20px !important;
}
.entry-content,
.hungfarm-tab-content-inner {
line-height: 1.7;
}
.cxs-toc-container {
margin: 15px 0;
max-width: 100%;
}
.cxs-floating-toc-panel {
right: 30px;
}
.hhungfarm-pagination {
border: none !important;
}
.site-main.container.hhungfarm-archive-page {
gap: 0 !important;
padding: 0 !important;
}
.site-main.container.hhungfarm-single-page {
padding: 0 !important;
}
/* Horizontal scrolling breadcrumbs on mobile */
.rank-math-breadcrumb,
.rank-math-breadcrumb *,
.hungfarm-breadcrumb,
.hungfarm-breadcrumb * {
white-space: nowrap !important;
}
.rank-math-breadcrumb,
.hungfarm-breadcrumb {
display: block !important;
width: 100% !important;
overflow-x: auto !important;
overflow-y: hidden !important;
text-overflow: clip !important;
-webkit-overflow-scrolling: touch;
scrollbar-width: thin !important;
scrollbar-color: rgba(16, 80, 41, 0.4) transparent !important;
padding-bottom: 4px !important;
}
.rank-math-breadcrumb::-webkit-scrollbar,
.hungfarm-breadcrumb::-webkit-scrollbar {
display: block !important;
height: 2px !important;
}
.rank-math-breadcrumb::-webkit-scrollbar-track,
.hungfarm-breadcrumb::-webkit-scrollbar-track {
background: transparent !important;
}
.rank-math-breadcrumb::-webkit-scrollbar-thumb,
.hungfarm-breadcrumb::-webkit-scrollbar-thumb {
background: rgba(16, 80, 41, 0.4) !important;
border-radius: 2px !important;
}
.rank-math-breadcrumb p,
.hungfarm-breadcrumb p,
.rank-math-breadcrumb ol,
.hungfarm-breadcrumb ol {
display: flex !important;
flex-direction: row !important;
flex-wrap: nowrap !important;
align-items: center !important;
width: max-content !important;
min-width: 100% !important;
margin: 0 !important;
padding: 0 !important;
list-style: none !important;
}
.rank-math-breadcrumb li,
.hungfarm-breadcrumb li,
.rank-math-breadcrumb span,
.hungfarm-breadcrumb span,
.rank-math-breadcrumb a,
.hungfarm-breadcrumb a {
display: flex !important;
align-items: center !important;
flex-wrap: nowrap !important;
flex-shrink: 0 !important;
float: none !important;
}
.container.hungfarm-archive-container {
padding: 0 !important;
}
.entry-content ul,
.hungfarm-tab-content-inner ul {
list-style: none;
padding-left: 0;
margin-bottom: 15px;
margin: 0;
}
/* Responsive scrolling tables on mobile */
.entry-content table,
.hungfarm-tab-content-inner table,
.hungfarm-cat-bottom-desc__inner table,
table {
display: block !important;
width: 100% !important;
overflow-x: auto !important;
-webkit-overflow-scrolling: touch;
border-color: #fff !important;
}
.entry-content table th,
.hungfarm-tab-content-inner table th,
.hungfarm-cat-bottom-desc__inner table th {
white-space: nowrap !important;
}
.entry-content table::-webkit-scrollbar,
.hungfarm-tab-content-inner table::-webkit-scrollbar,
.hungfarm-cat-bottom-desc__inner table::-webkit-scrollbar,
table::-webkit-scrollbar {
display: block !important;
height: 3px !important;
}
.entry-content table::-webkit-scrollbar-track,
.hungfarm-tab-content-inner table::-webkit-scrollbar-track,
.hungfarm-cat-bottom-desc__inner table::-webkit-scrollbar-track,
table::-webkit-scrollbar-track {
background: transparent !important;
}
.entry-content table::-webkit-scrollbar-thumb,
.hungfarm-tab-content-inner table::-webkit-scrollbar-thumb,
.hungfarm-cat-bottom-desc__inner table::-webkit-scrollbar-thumb,
table::-webkit-scrollbar-thumb {
background: rgba(16, 80, 41, 0.4) !important;
border-radius: 3px !important;
}
/* Product custom description tables scroll fix */
.wrapper_hungfarmtable {
display: block !important;
}
.container_hungfarmtable {
display: block !important;
width: 100% !important;
overflow-x: auto !important;
-webkit-overflow-scrolling: touch;
}
.container_hungfarmtable::-webkit-scrollbar {
display: block !important;
height: 3px !important;
}
.container_hungfarmtable::-webkit-scrollbar-track {
background: transparent !important;
}
.container_hungfarmtable::-webkit-scrollbar-thumb {
background: rgba(16, 80, 41, 0.4) !important;
border-radius: 3px !important;
}
.hungfarm-archive-grid .hungfarm-tt-card__name {
margin: 10px 12px 0px 12px;
}
.hungfarm-archive-grid .hungfarm-tt-card__price {
padding: 0 12px 10px;
}
.single-product .price span.amount {
font-size: 20px;
}
.woocommerce-product-details__short-description ul {
padding-left: 25px;
}
.cxs-swatch .cxs-label {
font-size: 11px;
}
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce div.product form.cart .button {
font-size: 13px !important;
padding: 12px 14px !important;
}
.custom-lead-form-block button[type="submit"],
.custom-lead-form-block .qf-submit {
padding: 8px 18px !important;
}
.quote_box_notehungfarm {
padding: 25px 20px !important;
}
.quote_box_notehungfarm::before {
content: "“";
position: absolute;
top: 10px;
left: 20px;
}
.quote_box_notehungfarm::after {
content: "”";
position: absolute;
bottom: -10px;
right: 20px;
}
/* WooCommerce standard buttons (Add to cart, Coupon, Update cart, Checkout) */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce div.product form.cart .button {
font-size: 13px !important;
padding: 12px 14px !important;
}
.quote_box_notehungfarm::before {
content: "“";
position: absolute;
top: 0px;
left: 20px;
color: #AF0B0B;
font-size: 60px;
font-weight: bold;
line-height: 1;
}
.quote_box_notehungfarm::after {
content: "”";
position: absolute;
bottom: -30px;
right: 20px;
color: #AF0B0B;
font-size: 60px;
font-weight: bold;
line-height: 1;
}
.internal-link-box_hungfarm {
background-color: rgba(255, 158, 3, 0.15);
border-left: 10px solid #e1a900;
padding: 15px 15px;
border-radius: 0 4px 4px 0;
margin: 15px 0;
}
.single-product .quantity.buttons_added {
max-width: max-content;
}
.product-summary .quantity {
display: inline-block;
width: auto;
}
.hungfarm-ptabs-btn {
font-size: 14px;
}
}
/* Stack single post author bio box on mobile */
@media (max-width: 576px) {
.author-box {
flex-direction: column !important;
text-align: center !important;
padding: 20px !important;
gap: 15px !important;
}
.author-avatar {
flex: 0 0 auto !important;
}
}
/* Make buttons a bit smaller on mobile screens */
@media (max-width: 640px) {
/* Single product Wholesale/Retail buttons */
.mua-si-btn,
.mua-le-btn {
font-size: 14px !important;
padding: 8px 10px !important;
}
}
/* Further reduce button sizes on narrow mobile screens (under 480px) */
@media (max-width: 480px) {}
/* =====================================================
MOBILE DRAWER CUSTOM STYLING (WHITE BACKGROUND)
===================================================== */
#cx-mobile-overlay {
display: none;
position: fixed;
inset: 0;
background: rgba(0, 0, 0, 0.55);
z-index: 8998;
transition: opacity 0.3s;
opacity: 0;
}
#cx-mobile-drawer {
display: none;
position: fixed;
top: 0;
left: 0;
bottom: 0;
width: 280px;
background: #fff;
box-shadow: 4px 0 12px rgba(0, 0, 0, 0.15);
z-index: 8999;
overflow-y: auto;
padding: 0 0 20px 0;
transform: translateX(-100%);
transition: transform 0.3s ease;
}
#cx-mobile-drawer .cx-drawer-close-btn {
position: absolute;
top: 10px;
right: 15px;
background: none;
border: none;
color: #333;
font-size: 32px;
cursor: pointer;
line-height: 1;
padding: 8px 12px;
min-width: 44px;
min-height: 44px;
display: flex;
align-items: center;
justify-content: center;
z-index: 10;
}
#cx-mobile-drawer .cx-drawer-banner {
padding: 30px 20px 20px;
border-bottom: 1px solid #eee;
text-align: center;
background: #f9f9f9;
}
#cx-mobile-drawer .cx-drawer-banner img {
max-width: 100%;
max-height: 80px;
display: block;
margin: 0 auto;
}
#cx-mobile-drawer .cx-drawer-banner span {
font-weight: bold;
font-size: 18px;
color: #105029;
}
#cx-mobile-drawer .custom-primary-nav {
list-style: none !important;
padding: 0 !important;
margin: 0 !important;
display: block !important;
}
#cx-mobile-drawer .custom-primary-nav>li>a {
color: rgb(51, 51, 51) !important;
display: block !important;
padding: 10px 20px !important;
border-bottom: 1px solid rgb(238, 238, 238) !important;
font-size: 14px !important;
font-weight: 600 !important;
text-transform: uppercase !important;
text-decoration: none !important;
line-height: 1.6 !important;
}
#cx-mobile-drawer .custom-primary-nav .sub-menu {
list-style: none !important;
padding-left: 15px !important;
background: #fcfcfc !important;
margin: 0 !important;
}
#cx-mobile-drawer .custom-primary-nav .sub-menu a {
color: #666 !important;
display: block !important;
padding: 10px 20px !important;
border-bottom: 1px solid #eee !important;
font-size: 14px !important;
font-weight: 500 !important;
text-transform: none !important;
text-decoration: none !important;
line-height: 1.6 !important;
}
#cx-mobile-drawer .cx-drawer-call-btn-wrap {
padding: 20px;
}
#cx-mobile-drawer .cx-drawer-call-btn {
display: flex;
align-items: center;
justify-content: center;
background: #105029;
color: #fff !important;
border-radius: 25px;
height: 46px;
font-size: 15px;
font-weight: 700;
text-decoration: none !important;
box-shadow: 0 4px 10px rgba(2, 135, 17, 0.25);
}
#cx-mobile-drawer .cx-drawer-call-btn i {
margin-right: 8px;
font-size: 16px;
}
/* =====================================================
PRIMARY BUTTONS & CTA OVERRIDES TO #208D45
===================================================== */
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt,
.woocommerce #respond input#submit.alt,
.single_add_to_cart_button,
.add_to_cart_button,
.checkout-button,
#place_order,
.cx-drawer-call-btn,
.hungfarm-services-cta-btn {
background-color: #208d45 !important;
background: #208d45 !important;
border-color: #208d45 !important;
color: #fff !important;
transition: all 0.2s ease !important;
}
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce #respond input#submit:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce input.button.alt:hover,
.woocommerce #respond input#submit.alt:hover,
.single_add_to_cart_button:hover,
.add_to_cart_button:hover,
.checkout-button:hover,
#place_order:hover,
.hf-quick-buy-btn:hover,
.cx-drawer-call-btn:hover,
.mua-si-btn:hover,
.mua-le-btn:hover,
.hungfarm-services-cta-btn:hover {
background-color: #1b7a3b !important;
background: #1b7a3b !important;
border-color: #1b7a3b !important;
color: #fff !important;
}