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

/*************** ADD CUSTOM CSS HERE.   ***************/

[class^="ri-"], [class*=" ri-"] {
    font-size: 24px; 
    /* Flatsome lưu màu primary trong biến --primary-color */
    color: var(--primary-color); 
    vertical-align: middle; 
    display: inline-block;
    line-height: 1;
}

body .ff-default .ff-el-form-control {
	box-shadow: none;
    border-color: rgb(182 138 50 / 20%);
    border-radius: 4px;
}
body .ff-default .ff-el-form-control:focus {
	border-color: rgb(182 138 50 / 100%);
}
body .ff-default .ff_btn_style {
	border-radius: 4px;
}

span.amount {
	color: var(--fs-color-secondary);
}


/*
  GoldHerbal homepage v2
  Add in Flatsome > Advanced > Custom CSS.
  Global colours and fonts are intentionally NOT declared here. Configure them in Theme Options.
  Set the intro/story sections to Primary and the cream sections to #F7F0E4 in UX Builder.
*/
.gh-home .button { border-radius: 3px; letter-spacing: .055em; }
.gh-home .lead { font-size: 1.15em; margin: 1rem 0 1.35rem; }
.gh-home .gh-eyebrow { font-size: .78em; font-weight: 600; letter-spacing: .13em; margin-bottom: .4rem; text-transform: uppercase; }
.gh-home .gh-benefits.row { margin-bottom: 1.4rem; max-width: 560px; }
.gh-home .gh-benefit { padding: .35rem .1rem; text-align: center; }
.gh-home .gh-benefit-icon { border: 1px solid currentColor; border-radius: 50%; font-size: 1.25rem; height: 48px; line-height: 46px; margin: 0 auto .42rem; width: 48px; }
.gh-home .gh-benefit strong, .gh-home .gh-benefit small { display: block; line-height: 1.2; }
.gh-home .gh-benefit strong { text-transform: uppercase; }
.gh-home .gh-benefit small { margin-top: .18rem; font-size: 85%}
.gh-cream { background-color: #f7f0e4; }
.gh-title-divider:not(.is-divider) { align-items: center; display: flex; gap: .55rem; margin: .55rem auto 1.45rem; max-width: 180px; }
.gh-title-divider:not(.is-divider)::before, .gh-title-divider:not(.is-divider)::after { background-color: var(--fs-color-secondary); content: ''; flex: 1; height: 1px; opacity: .62; }
.gh-title-divider:not(.is-divider) span { border: 1px solid var(--fs-color-secondary); display: block; height: 6px; transform: rotate(45deg); width: 6px; }
/* Flatsome Divider module: applied globally because the module has no custom CSS-class field. */
.is-divider { background: linear-gradient(to right, var(--fs-color-secondary) 0 calc(50% - 9px), transparent calc(50% - 9px) calc(50% + 9px), var(--fs-color-secondary) calc(50% + 9px) 100%) !important; height: 1px !important; margin-bottom: 1.5rem !important; margin-top: .6rem !important; max-width: 180px; opacity: .68; overflow: visible; position: relative; }
.is-divider::before { background-color: transparent; border: 1px solid var(--fs-color-secondary); box-sizing: border-box; content: ''; height: 6px; left: 50%; position: absolute; top: 50%; transform: translate(-50%, -50%) rotate(45deg); width: 6px; }
/* Cream sections use the actual surface colour behind the diamond. */
.gh-cream .is-divider::before { background-color: #f7f0e4; }
/* Default heading scale. H2 is the visual reference point at 2em. */
body h1, body .h1 { font-size: 2.2em; }
body h2, body .h2 { font-size: 1.8em; }
body h3, body .h3 { font-size: 1.3em; }
body h4, body .h4 { font-size: 1.2em; }
body h5, body .h5 { font-size: 1.1em; }
body h6, body .h6 { font-size: 1em; }
.gh-product-grid .product-small { margin-bottom: 0; }
.gh-product-grid .box { background: rgba(255,255,255,.34); border: 1px solid var(--fs-color-secondary); border-radius: 7px; height: 100%; overflow: hidden; }
.gh-product-grid .box-image img { aspect-ratio: 1 / 1; object-fit: cover; }
.gh-product-grid .box-text { padding: 1rem .8rem 1.15rem; text-align: center; }
.gh-product-grid .name { font-size: 1rem; line-height: 1.25; margin-bottom: .45rem; text-transform: uppercase; }
.gh-product-grid .price { font-size: .94rem; }
.gh-product-grid .add-to-cart-button { display: none; }
.gh-magazine .post-item .box { background: rgba(255,255,255,.34); border: 1px solid var(--fs-color-secondary); border-radius: 7px; height: 100%; overflow: hidden; }
.gh-magazine .box-text { padding: .8rem; text-align: center; }
.gh-magazine .post-title { font-size: 1rem; line-height: 1.3; }
.gh-magazine-cta { border: 1px solid var(--fs-color-secondary); border-radius: 7px; box-shadow: inset 0 0 0 3px #f7f0e4, inset 0 0 0 4px var(--fs-color-secondary); height: 100%; overflow: hidden; padding: 2.1rem 1.45rem 5.9rem; position: relative; text-align: center; }
.gh-magazine-cta h3 { font-size: 1.7rem; margin-bottom: .7rem; text-transform: uppercase; }
.gh-magazine-cta .button { position: relative; z-index: 1; }
.gh-magazine-ornament { bottom: .35rem; display: block; height: auto; left: 50%; max-height: 72px; max-width: 82%; object-fit: contain; position: absolute; transform: translateX(-50%); width: 210px; }




/* GoldHerbal About page v1 - Flatsome > Advanced > Custom CSS
   Theme colours and fonts stay in Flatsome Theme Options. #F7F0E4 is the page-specific parchment surface. */

.gh-about .button { border-radius: 3px; letter-spacing: .055em; }
.gh-about .lead, .gh-about .gh-section-lead { font-size: 1.08em; line-height: 1.65; }
.gh-about .gh-section-lead { margin-left: auto; margin-right: auto; max-width: 720px; }
.gh-about .gh-eyebrow { font-size: .78em; font-weight: 600; letter-spacing: .13em; margin-bottom: .4rem; text-transform: uppercase; }
.gh-about-cream { background-color: #f7f0e4; }
.gh-value-grid { margin-top: 2.4rem; }
.gh-value-card { height: 100%; padding: .8rem 1.45rem; }
.gh-value-grid .col + .col .gh-value-card { border-left: 1px solid var(--fs-color-secondary); }
.gh-value-icon { border: 1px solid var(--fs-color-secondary); border-radius: 50%; color: var(--fs-color-secondary); font-size: 2rem; height: 74px; line-height: 70px; margin: 0 auto 1rem; width: 74px; }
.gh-value-icon i {
	font-size: 32px;
}
.gh-value-card h3, .gh-standard-card h3, .gh-facility-card h3 { margin-bottom: .6rem; }
.gh-value-card p, .gh-standard-card p { font-size: .9em; line-height: 1.55; margin-bottom: 0; }
/* Keep Flatsome's native banner positioning intact; it controls the background and text-box layers. */
.gh-factory-banner .banner-bg { filter: brightness(.72); }
.gh-factory-copy { max-width: 560px; }
.gh-factory-stats { background-color: var(--fs-color-primary); color: #fff; }
.gh-factory-stats .row { padding-bottom: 0; }
.gh-stat { min-height: 130px; padding: 1.45rem 1rem; }
.gh-four-grid .col + .col .gh-stat { border-left: 1px solid rgba(255,255,255,.24); }
.gh-stat strong, .gh-stat small { display: block; }
.gh-stat strong { color: var(--fs-color-secondary); font-size: 1.05em; margin-bottom: .5rem; }
.gh-stat small { font-size: .82em; line-height: 1.4; }
.gh-five-grid { display: flex; flex-wrap: wrap; }
.gh-five-grid > .col { flex: 0 0 20%; max-width: 20%; }
.gh-standard-card { border: 1px solid var(--fs-color-secondary); border-radius: 8px; height: 100%; padding: 1.35rem 1rem; text-align: center; }
.gh-standard-icon i { color: var(--fs-color-secondary); font-size: 32px; line-height: 1; margin-bottom: .8rem; }
.gh-facility-card { background: #fffdf8; border: 1px solid #87a48b; border-radius: 12px; height: 100%; overflow: hidden; text-align: center; }
.gh-facility-card .image-cover { margin-bottom: 0; }
.gh-facility-card img { aspect-ratio: 1.25 / 1; object-fit: cover; width: 100%; }
.gh-facility-card h3 { line-height: 1.35; margin: 0; min-height: 70px; padding: .75rem .5rem; }
.gh-tech-grid { align-items: stretch; }
.gh-tech-benefits, .gh-tech-card { border-radius: 8px; height: 100%; overflow: hidden; padding: 1.2rem; }
.gh-tech-benefits { background-color: var(--fs-color-primary); color: #fff; }
.gh-tech-benefits h3 { color: var(--fs-color-secondary); }
.gh-tech-card { border: 1px solid rgba(18,57,35,.14); }
.gh-tech-benefits h3, .gh-tech-card h3 { font-size: 1em; min-height: 48px; text-align: center; }
.gh-tech-benefits ul, .gh-tech-card ul { list-style: none; margin: 0; }
.gh-tech-benefits li, .gh-tech-card li { border-top: 1px solid rgba(18,57,35,.14); font-size: .82em; line-height: 1.35; padding: .55rem 0; }
.gh-tech-benefits li { border-color: rgba(255,255,255,.18); }
.gh-tech-benefits li::before { color: var(--fs-color-secondary); content: '✓'; font-weight: 700; margin-right: .5rem; }
.gh-certifications { background-color: var(--fs-color-primary); color: #fff; }
.gh-certifications h2, .gh-certifications .gh-eyebrow { color: #fff; }
.gh-certificate img { background: #fffdf8; border: 4px solid var(--fs-color-secondary); box-shadow: 0 8px 24px rgba(0,0,0,.18); max-width: 280px; }



.gh-about-hero h1 {
  color: #fff;
  font-size: clamp(3.15rem, 5.1vw, 5.5rem);
  font-weight: 600;
  letter-spacing: -.025em;
  line-height: .94;
  margin-bottom: .7rem;
}

.gh-about-hero h1 em {
  color: var(--fs-color-secondary, #b68a42);
  font-style: normal;
}

.gh-about-hero-lead {
  color: rgba(255,255,255,.94);
  font-size: 1em;
  line-height: 1.8;
  margin-bottom: .25rem;
  max-width: 425px;
}
.gh-standard-card h3, .gh-facility-card h3, .gh-tech-benefits h3, .gh-tech-card h3 {
	font-size: 1.2em;
}
.gh-tech-card {
	background: rgba(255,255,255,0.5);
}

.img-so-sanh {
	border: 1px solid var(--fs-color-secondary);
	border-radius: 8px;
	overflow: hidden;
}

/* GOLDHERBAL | BRAND STORY PAGE */
/* Four milestones */
.gh-story-value-grid i {
	font-size: 32px;
}

/* Journey cards */
.gh-story-journey-grid {
  margin: 1.8rem auto 0;
  max-width: 1160px;
}
.gh-story-step {
  background: #fffdf9;
  border: 1px solid rgba(182, 138, 66, 0.7);
  border-radius: 9px;
  height: 100%;
  overflow: hidden;
  position: relative;
  text-align: center;
}
.gh-story-step-image {
  height: 240px;
  overflow: hidden;
}
.gh-story-step-image .image,
.gh-story-step-image .img,
.gh-story-step-image img {
  height: 100%;
  margin: 0;
  width: 100%;
}
.gh-story-step-image img {
  object-fit: cover;
}
.gh-story-step-copy {
  min-height: 200px;
  padding: 2.2rem 1.4rem 1.25rem;
  position: relative;
  border-top: 1px solid var(--fs-color-secondary);
}
.gh-story-step-copy > b {
  align-items: center;
  background: #fffdf9;
  border: 2px solid var(--fs-color-secondary);
  border-radius: 50%;
  color: var(--fs-color-secondary);
  display: flex;
  font-size: 0.95em;
  height: 47px;
  justify-content: center;
  left: calc(50% - 24px);
  position: absolute;
  top: -25px;
  width: 47px;
}
.gh-story-step h3 {
  color: #163c27;
  font-size: 1.5rem;
  font-weight: 600;
  margin: 0.55rem 0;
}
.gh-story-step p {
  font-size: 0.9em;
  line-height: 1.6;
  margin: 0;
}
.gh-story-journey-grid .col:not(:last-child) .gh-story-step:after {
  color: var(--gh-gold);
  content: "➜";
  font-size: 2.6rem;
  position: absolute;
  right: -2.35rem;
  top: 55%;
  z-index: 2;
}


/* CTA */
.gh-story-cta {
  background-color: var(--gh-green);
  overflow: hidden;
}
.gh-story-cta-panel {
  align-items: center;
  background: linear-gradient(
    104deg,
    #093720 0%,
    #0d4429 64%,
    rgba(18, 57, 35, 0.94) 72%,
    rgba(18, 57, 35, 0) 73%
  );
  display: flex;
  height: 100%;
  min-height: 420px;
  overflow: hidden;
  position: relative;
  width: 56%;
}
.gh-story-cta-panel:after {
  border: 1px solid rgba(182, 138, 66, 0.75);
  border-left: 0;
  border-radius: 0 65% 65% 0;
  bottom: -30%;
  content: "";
  height: 155%;
  left: -32%;
  position: absolute;
  width: 129%;
}
.gh-story-cta-content {
  max-width: 590px;
  padding: 4rem 3rem 4rem max(3.5rem, calc((100vw - 1280px) / 2));
  position: relative;
  z-index: 2;
}
.gh-story-cta h2 {
  color: #fff;
  font-size: clamp(2.8rem, 4.2vw, 4.5rem);
}
.gh-story-cta p {
  color: rgba(255, 255, 255, 0.92);
  font-size: 0.92em;
  line-height: 1.75;
  max-width: 435px;
}
.gh-story-cta-leaf {
  bottom: -23%;
  max-width: 230px;
  position: absolute;
  right: 3%;
  width: 35%;
  z-index: 1;
}





/* Col Leaf */
.col-green-leaf {
	background: var(--primary-color);
	position: relative;
	padding: 5%;
}
.col-green-leaf:before {
	content: '';
    width: auto;
    height: 100%;
    aspect-ratio: 264 / 1199;
    background: url(../../uploads/goldherbal-green-hero-curve-v3.png) no-repeat right / contain;
    position: absolute;
    left: 100%;
    top: 0;
    z-index: 1;
  }
.col-green-leaf .col-inner {
	padding: 10%;
}

.col-green-leaf:after {
	content: '';
	background: url(../../uploads/goldherbal-hero-gold-leaf-v2.png) no-repeat top;
	background-size: 100% auto;
	width: auto;
    height: 70%;
    aspect-ratio: 862 / 1400;
    position: absolute;
    bottom: 0;
    left: 90%;
    z-index: 1;
}




/* GoldHerbal | Hợp tác đại lý. */

.gh-partner { --gh-cream: #f7f0e4; }
.gh-partner h1, .gh-partner h2, .gh-partner h3 { line-height: 1.08; }
.gh-partner h1 { font-size: clamp(2.45rem, 4.5vw, 4.4rem); }
.gh-partner .button { border-radius: 4px; font-size: .78em; font-weight: 700; letter-spacing: .06em; }
.gh-eyebrow { color: var(--fs-color-secondary); font-size: .78em; font-weight: 700; letter-spacing: .12em; margin-bottom: .55rem; text-transform: uppercase; }
.gh-section-lead { font-size: 1.05em; line-height: 1.7; margin: 0 auto; max-width: 760px; }
.gh-partner-intro, .gh-partner-form, .gh-partner-logos { background: var(--gh-cream); }
.gh-partner-proof-grid { margin-top: 2.5rem; }
.gh-partner-proof { height: 100%; padding: .5rem 1.8rem; text-align: center; }
.gh-partner-proof-grid .col + .col .gh-partner-proof { border-left: 1px solid rgba(182,138,66,.55); }
.gh-partner .icon-box-img { margin-bottom: .75rem; }
.gh-partner .icon-box-text h3 { font-size: 1.12em; margin-bottom: .5rem; }
.gh-partner .icon-box-text p { font-size: .9em; line-height: 1.58; margin-bottom: 0; }
.gh-partner-photo .image, .gh-partner-photo .img, .gh-partner-photo img { height: 100%; margin: 0; width: 100%; }
.gh-partner-photo img { min-height: 430px; object-fit: cover; }
.gh-partner-copy-col { background: var(--gh-cream); display: flex; }
.gh-partner-copy { align-self: center; padding: clamp(2.8rem, 5vw, 5.6rem); width: 100%; }
.gh-partner-copy > p:not(.gh-eyebrow) { line-height: 1.7; max-width: 580px; }
.gh-partner-feature-row { margin: 1.7rem -10px 0; }
.gh-partner-feature-row > .col { padding-bottom: 0; padding-left: 10px; padding-right: 10px; }
.gh-partner-feature { border: 1px solid rgba(182,138,66,.65); border-radius: 9px; height: 100%; padding: 1.15rem; }
.gh-partner-feature .icon-box-img { margin-right: .85rem; }
.gh-partner-feature .icon-box-text h3 { font-size: 1em; }
.gh-partner-copy-col-dark { background: var(--fs-color-primary); color: #fff; }
.gh-partner-copy-col-dark h2, .gh-partner-copy-col-dark p { color: #fff; }
.gh-partner-copy-col-dark .gh-partner-feature { border-color: rgba(182,138,66,.8); }
.gh-partner-benefits, .gh-partner-cta { background: var(--fs-color-primary); color: #fff; }
.gh-partner-benefits h2, .gh-partner-benefits h3, .gh-partner-benefits p, .gh-partner-cta h2, .gh-partner-cta p { color: #fff; }
.gh-partner-benefit { height: 100%; padding: .6rem 1.4rem; }
.gh-partner-benefit-grid .col + .col .gh-partner-benefit { border-left: 1px solid rgba(182,138,66,.62); }
.gh-partner-form-row { max-width: 1100px; }
.gh-partner-checklist { list-style: none; margin: 1.4rem 0 0; }
.gh-partner-checklist li { margin-bottom: .75rem; }
.gh-partner-checklist li::before { color: var(--fs-color-secondary); content: '✓'; font-weight: 700; margin-right: .65rem; }
.gh-partner-form-card .col-inner { background: #fffdf9; border-radius: 10px; box-shadow: 0 12px 32px rgba(18,57,35,.12); padding: clamp(1.6rem, 3vw, 2.8rem); }
.gh-partner-form-card h3 { text-align: center; }
.gh-partner-form-card input, .gh-partner-form-card select, .gh-partner-form-card textarea { border-color: rgba(18,57,35,.18); border-radius: 4px; }
.gh-partner-form-card input[type='submit'] { background: var(--fs-color-primary); border-radius: 4px; color: #fff; font-size: .8em; font-weight: 700; letter-spacing: .06em; width: 100%; }

.gh-dealer-logo-grid .post-item .box-image { align-items: center; background: #fffdf9; border: 1px solid rgba(182,138,66,.45); border-radius: 7px;}


.bg-leaf-yl {
	background: url(../../uploads/goldherbal-partner-leaf-right-v1.png) no-repeat right bottom, url(../../uploads/goldherbal-partner-leaf-left-v1.png) no-repeat left bottom, var(--gh-cream);
	background-size: 15%;
}


#content .post-sidebar {
	padding: 0;
}

/* SHOP */
.archive.woocommerce #main {
	background: rgb(182 138 66 / 5%);
}
.widget {
	margin-bottom: 40px;
	background: white;
	border: 1px solid rgb(182 138 66 / 20%);
	border-radius: 6px;
	padding: 16px;
}
.widget .widget-title  {
	margin-bottom: 10px;
	display: block;
}
.widget .is-divider {
	display: none;
}
.product_meta>span {
	border: none;
}

#main .ic-btn-zalo {
	width: 32px;
}

/* FOOTER */
.absolute-footer {display: none}
#footer .ic-btn-zalo {
	width: 28px;
}




@media only screen and (max-width: 849px) {
	.gh-story-step-image {
		height: 220px;
	}
	#content .post-sidebar {
		padding: 0 3%;
	}
}

@media only screen and (max-width: 549px) {
/*************** ADD MOBILE ONLY CSS HERE  ***************/
.gh-hero-banner { min-height: 650px; }
  .gh-hero-banner { min-height: 650px; }
  .gh-hero-copy { padding: 0 .7rem; }
  .gh-home .lead { font-size: 1rem; }
  .gh-home .gh-benefit-icon { height: 40px; line-height: 38px; width: 40px; }
  .gh-product-grid .box-text { padding: .75rem .5rem .9rem; }
  .gh-product-grid .name { font-size: .78rem; }
  .gh-magazine-cta { padding-bottom: 5.3rem; }
  .gh-magazine-ornament { max-height: 62px; width: 180px; }
	
	
  .gh-value-grid .col + .col .gh-value-card { border-left: 0; border-top: 1px solid var(--fs-color-secondary); }
  .gh-value-card { padding: 1.5rem .75rem; }
  .gh-four-grid .col + .col .gh-stat { border-left: 0; }
  .gh-five-grid > .col { flex-basis: 100%; max-width: 100%; }
  .gh-standard-card { margin-bottom: .75rem; }
  .gh-facility-grid { flex-wrap: nowrap; overflow-x: auto; padding-bottom: .75rem; scroll-snap-type: x mandatory; }
  .gh-facility-grid > .col { flex: 0 0 78%; max-width: 78%; scroll-snap-align: start; }
  .gh-tech-grid > .col { margin-bottom: .75rem; }
	
	.col-green-leaf .col-inner {
		padding: 10% 5%;
	}
	.col-green-leaf:before {
		width: 100%;
		height: auto;
		aspect-ratio: 559 / 61;
		background: url(../../uploads/goldherbal-green-hero-curve-v3-sp.png) no-repeat bottom / contain;
		left: 0;
		top: 100%;
		bottom: auto;
	}
	.col-green-leaf:after {
    width: auto;
    height: 35%;
    aspect-ratio: 862 / 1400;
    position: absolute;
    bottom: -35px;
    left: auto;
    right: 0;
	}
	.gh-about .gh-eyebrow {
		font-size: .9em;
	}
	.gh-factory-banner .gh-factory-copy {
		font-size: 13px;
	}
	
	
	.gh-partner h1 { font-size: 2.4rem; }
  .gh-partner-feature-row > .col + .col { margin-top: 1rem; }
  .gh-dealer-logo { height: 90px; padding: .75rem; }

	.wacu-widget {
		width: auto;
	}
	
	.gh-story-step-image {
		height: 230px;
	}
}