#gherb-blog {
--green: #1b5e20;
--green-light: #eaf5ec;
--green-mid: #2ccf54;
--text: #0e1e3f;
--text-gray: #4b5b67;
--radius: 30px;
font-family: "Kanit", sans-serif !important;
font-weight: 400;
font-style: normal;
color: #0e1e3f;
overflow-x: clip;
}
#gherb-blog *, #gherb-blog *::before, #gherb-blog *::after { box-sizing: border-box; }
#gherb-blog h1, #gherb-blog h2, #gherb-blog h3,
#gherb-blog h4, #gherb-blog p, #gherb-blog span,
#gherb-blog a { margin: 0; padding: 0; }
#gherb-blog img { display: block; max-width: 100%; height: auto; } #gherb-blog .g-badge {
display: inline-block;
background: #1b5e20; color: #fff;
font-size: 13px; font-weight: 500;
padding: 6px 16px; border-radius: 999px; margin-bottom: 14px;
} #gherb-blog .g-section-header { text-align: center; margin-bottom: 52px; }
#gherb-blog .g-section-header h2 { font-size: 36px; font-weight: 700; line-height: 1.3; margin: 0 0 12px; }
#gherb-blog .g-section-header p  { font-size: 16px; color: #4b5b67; margin: 0; } #gherb-blog .g-btn {
display: inline-block !important;
padding: 5px 30px !important;
border-radius: 999px !important;
font-size: 15px; font-weight: 600;
text-decoration: none !important;
transition: opacity .2s; cursor: pointer;
border: none !important;
font-family: "Kanit", sans-serif;
}
#gherb-blog .g-btn:hover          { opacity: .85; }
#gherb-blog .g-btn--green         { background: #1b5e20 !important; color: #fff !important; }
#gherb-blog .g-btn--white         { background: #fff !important; color: #1b5e20 !important; }
#gherb-blog .g-btn--outline       { background: transparent !important; border: 2px solid #1b5e20 !important; color: #1b5e20 !important; }
#gherb-blog .g-btn--outline-white { background: transparent !important; border: 2px solid #fff !important; color: #fff !important; }
#gherb-blog .g-btn--full          { width: 100%; text-align: center; }
.g-btn--ghost        { background: rgba(0,152,74,0.2) !important; color: #fff !important; } .gb-container { max-width: 90%; margin: 0 auto; padding: 0 72px; }
.gb-section   { padding: 80px 0; } .gb-hero { position: relative ;
aspect-ratio: 16 / 7 ;
height: auto ; overflow: hidden ;
margin: 24px ;
border-radius: 100px 0 100px 0 ;
}
.gb-hero__inner {
position: absolute;
inset: 0;
background-size: cover;
background-position: center center;
display: flex;
align-items: center;
}
.gb-hero__overlay-left {
position: absolute;
inset: 0;
backdrop-filter: blur(4px);
-webkit-mask-image: linear-gradient(to right, black 0%, black 40%, transparent 70%);
mask-image: linear-gradient(to right, black 0%, black 40%, transparent 70%);
}
.gb-hero__content {
position: relative;
z-index: 2;
padding: 0 80px;
color: #fff;
width: 100%;
max-width: 80%;
}
.gb-hero__content .g-badge {
background: #1b5e20;
color: #fff;
}
.gb-hero__content h1 {
font-size: 64px; font-weight: 700;
line-height: 1.2; margin: 0 0 16px; color: #fff;
}
.gb-hero__content p {
font-size: 16px; line-height: 1.7;
color: rgba(255,255,255,.88); margin: 0 0 24px;
} .gb-hero__meta {
display: flex; gap: 8px; font-size: 14px;
color: rgba(255,255,255,.75); margin-bottom: 20px;
}
.gb-hero__readmore {
display: none;
background: none;
border: none;
color: #fff;
font-family: "Kanit", sans-serif;
font-size: 13px;
font-weight: 600;
text-decoration: underline;
cursor: pointer;
padding: 4px 0;
align-self: flex-start;
margin-bottom: 0 !important;
} .gb-search { padding: 32px 0 8px; }
.gb-search .gb-container { display: flex; justify-content: flex-end; }
.gb-search__wrap {
display: flex; align-items: center; gap: 10px;
width: 480px; max-width: 100%;
border: 1.5px solid #dde3dd;
border-radius: 999px;
padding: 5px 20px;
background: #fff;
}
.gb-search__icon { flex-shrink: 0; color: #9aaab4; }
.gb-search__input,
#gherb-blog .gb-search__input,
#gherb-blog input.gb-search__input {
flex: 1; border: none !important; outline: none !important;
box-shadow: none !important; -webkit-appearance: none; appearance: none;
color: #0e1e3f; background: transparent; padding: 0; margin-bottom: 0 !important;
}
.gb-search__input::placeholder { color: #b0bec5; } .gb-category--gray { background: #f7f9f7; }
.gb-bo { padding: 0 0 80px 0; }
.gb-category__header {
display: flex; align-items: center; justify-content: space-between; margin-bottom: 32px;
}
.gb-category__header h2 { font-size: 28px; font-weight: 700; margin: 0; } .gb-articles__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 50px; }
.gb-article-card {
border-radius: 16px; overflow: hidden; background: #fff;
box-shadow: 0 2px 16px rgba(0,0,0,.07);
display: flex; flex-direction: column;
}
.gb-article-card__img { overflow: hidden; position: relative; flex-shrink: 0; padding: 20px; }
.gb-article-card__img picture { display: block; }
.gb-article-card__img img { width: 100%; aspect-ratio: 16 / 10; height: auto; display: block; object-fit: cover; border-radius: 8px; transition: transform .3s; }
.gb-article-card:hover .gb-article-card__img img { transform: scale(1.04); }
.gb-article-card__cat {
position: static;
background: #e8f5e9;
color: #1b5e20;
font-size: 11px;
font-weight: 600;
padding: 3px 10px;
border-radius: 999px;
}
.gb-article-card__body {
padding: 18px 20px 20px;
display: flex; flex-direction: column; flex: 1;
}
.gb-article-card__meta {
display: flex; justify-content: flex-end; margin-bottom: 10px;
}
.gb-article-card__date { font-size: 12px; color: #9aaab4; display: block; }
.gb-article-card__body h3 { font-size: 15px; font-weight: 700; margin: 0 0 14px; line-height: 1.5; flex: 1; color: #0e1e3f; }
.gb-article-card__link {
font-size: 13px; color: #1b5e20; font-weight: 600; text-decoration: none;
align-self: flex-end;
padding: 10px 0 !important;
}
.gb-article-card__link:hover { text-decoration: underline; } .gb-article-card--desc .gb-article-card__meta { justify-content: space-between; }
.gb-article-card--desc .gb-article-card__body .gb-article-card__cat {
position: static; background: #fff; color: #2b8b31;
font-size: 11px; font-weight: 600; padding: 3px 10px; border-radius: 999px;
}
.gb-article-card--desc .gb-article-card__body h3 { margin-bottom: 8px; }
.gb-article-card--desc .gb-article-card__desc {
font-size: 12px; color: #7a8c9a; line-height: 1.6; margin: 0 0 12px;
display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.gb-article-card--desc .gb-article-card__date {
display: inline-flex; align-items: center; gap: 4px;
}
.gb-article-card--desc .gb-article-card__date svg { flex-shrink: 0; } .gb-featured__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: stretch; }
.gb-featured__list { display: flex; flex-direction: column; gap: 0; }
.gb-featured__heading { font-size: 28px; font-weight: 700; margin: 0 0 24px; color: #0e1e3f; }
.gb-featured__main { border-radius: 20px; overflow: hidden; }
.gb-featured__main img { width: 100%; height: 100%; object-fit: cover; display: block; } .gb-herb-card {
display: grid; grid-template-columns: 15% 85%;
border-bottom: 1px solid #eef2ee;
padding: 20px 0;
}
.gb-herb-card:last-child { border-bottom: none; }
.gb-herb-card__img {
border-radius: 10px; overflow: hidden; flex-shrink: 0;
display: flex; align-items: center; justify-content: center;
align-self: center;
}
.gb-herb-card__img img { width: 100%; height: 100%; object-fit: cover; border-radius: 10px; }
.gb-herb-card__body { padding: 0 0 0 16px; display: flex; flex-direction: column; }
.gb-herb-card__meta { display: flex; justify-content: flex-end; margin-bottom: 6px; }
.gb-herb-card__date {
display: inline-flex; align-items: center; gap: 4px; font-size: 11px; color: #9aaab4;
}
.gb-herb-card__date svg { flex-shrink: 0; }
.gb-herb-card h3 { font-size: 14px; font-weight: 700; margin: 0 0 6px; line-height: 1.45; color: #0e1e3f; }
.gb-herb-card__desc { font-size: 12px; color: #7a8c9a; line-height: 1.6; margin: 0; } .gb-featured-card {
position: relative; border-radius: 20px; overflow: hidden;
height: 100%; min-height: 460px; background-size: cover; background-position: center;
display: flex; align-items: flex-end;
}
.gb-featured-card__content { position: relative; z-index: 1; padding: 32px; color: #fff; max-width: 80%;}
.gb-featured-card__content h3 {
font-size: 22px; font-weight: 700; color: #fff; margin: 0 0 10px; line-height: 1.4; 
}
.gb-featured-card__content p {
font-size: 13px; color: rgba(255,255,255,.8); line-height: 1.6; margin: 0 0 20px; padding: 10px 0 !important;
}
.gb-featured-card__link.g-btn {
font-size: 13px !important; padding: 9px 22px !important;
}  @media (max-width: 1200px) {
.gb-container { padding: 0 40px; }
.gb-hero { aspect-ratio: auto; height: 720px; max-height: none; }
.gb-hero__inner { height: 100%; }
.gb-hero__content { padding: 0 60px; }
.gb-hero__content h1 { font-size: 48px; }
.gb-articles__grid { gap: 32px; }
.gb-featured__heading { font-size: 26px; }
.gb-category__header h2 { font-size: 26px; }
} @media (max-width: 900px) {
.gb-section { padding: 64px 0; }
.gb-bo { padding: 0 0 64px 0; }
.gb-hero {
margin: 16px;
border-radius: 60px 0 60px 0;
aspect-ratio: auto;
height: 560px;
max-height: none;
}
.gb-hero__inner { height: 100%; }
.gb-hero__content { padding: 0 40px; max-width: 90%; }
.gb-hero__content h1 { font-size: 32px; }
.gb-hero__content h1 br { display: none; }
.gb-hero__content p { font-size: 15px; }
.gb-hero__content p br { display: none; }
.gb-search__wrap { width: 100%; }
.gb-search .gb-container { justify-content: stretch; }
.gb-articles__grid { grid-template-columns: repeat(2, 1fr); gap: 28px; }
.gb-featured__grid { grid-template-columns: 1fr; gap: 32px; }
.gb-featured__heading { font-size: 24px; margin-bottom: 20px; }
.gb-featured-card { min-height: 320px; }
.gb-featured-card__content { padding: 24px; }
.gb-featured-card__content h3 { font-size: 20px; }
.gb-category__header { margin-bottom: 24px; }
.gb-category__header h2 { font-size: 24px; }
.gb-herb-card { grid-template-columns: 20% 80%; }
} @media (max-width: 768px) {
.gb-container { padding: 0 24px; }
.gb-section { padding: 48px 0; }
.gb-bo { padding: 0 0 48px 0; }
.gb-hero {
margin: 12px;
border-radius: 32px;
aspect-ratio: auto;
height: 480px;
max-height: none;
}
.gb-hero__inner {
height: 100%;
align-items: flex-end;
position: relative;
}
.gb-hero__inner::after {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(
to top,
rgba(8, 26, 12, .75) 0%,
rgba(8, 26, 12, .35) 50%,
transparent 85%
);
z-index: 0;
}
.gb-hero__content {
position: relative;
z-index: 1;
padding: 0 24px 36px;
width: 100%;
max-width: 100%;
}
.gb-hero__content h1 { font-size: 24px; word-wrap: break-word; overflow-wrap: break-word; }
.gb-hero__content h1 br { display: none; }
.gb-hero__content p { font-size: 13px; word-wrap: break-word; overflow-wrap: break-word; }
.gb-hero__content p br { display: none; } .gb-hero__meta {
flex-direction: column;
align-items: flex-start;
gap: 4px;
font-size: 12px;
margin-bottom: 14px;
word-wrap: break-word;
overflow-wrap: break-word;
}
.gb-hero__meta p {
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
transition: all .3s ease;
}
.gb-hero__meta.is-expanded p {
display: block;
-webkit-line-clamp: unset;
}
.gb-hero__readmore { display: inline-block; }
.gb-articles__grid { grid-template-columns: 1fr; gap: 20px; }
.gb-article-card__img { padding: 14px; }
.gb-article-card__body { padding: 14px 16px 16px; }
.gb-article-card__body h3 { font-size: 14px; }
.gb-featured-card { min-height: 280px; }
.gb-featured-card__content { padding: 20px; }
.gb-featured-card__content h3 { font-size: 18px; }
.gb-featured-card__content p { font-size: 12px; margin-bottom: 14px; }
.gb-herb-card { grid-template-columns: 25% 75%; padding: 16px 0; }
.gb-herb-card__body { padding-left: 12px; }
.gb-herb-card h3 { font-size: 13px; }
.gb-category__header h2 { font-size: 20px; }
.gb-search { padding: 24px 0 4px; }
} @media (max-width: 480px) {
.gb-container { padding: 0 16px; }
.gb-hero { aspect-ratio: auto; margin: 8px; border-radius: 24px; height: 440px; max-height: none; }
.gb-hero__inner { height: 100%; }
.gb-hero__content { padding: 0 20px 28px; }
.gb-hero__content h1 { font-size: 20px; }
.gb-hero__content p { font-size: 12px; }
.gb-search__wrap { padding: 4px 14px; }
.gb-search__input { font-size: 13px; }
.gb-category__header h2 { font-size: 18px; }
} .gb-slider { position: relative; }
.gb-slider__btn {
position: absolute; top: 50%; transform: translateY(-50%);
width: clamp(32px, 9vw, 40px); height: clamp(32px, 9vw, 40px);
border-radius: 50%;
background: #fff; border: 1px solid #e5e7eb;
font-size: clamp(18px, 4.5vw, 22px); line-height: 1; color: #1b5e20; cursor: pointer;
box-shadow: 0 2px 10px rgba(0,0,0,.12);
display: flex; align-items: center; justify-content: center;
z-index: 3; transition: background .15s, transform .15s;
}
.gb-slider__btn:hover:not(:disabled) { background: #f3f4f6; transform: translateY(-50%) scale(1.05); }
.gb-slider__btn:disabled { opacity: .3; cursor: not-allowed; }
.gb-slider__btn[hidden] { display: none; }
.gb-slider__btn--prev { left: 4px; }
.gb-slider__btn--next { right: 4px; }
@media (min-width: 1024px) {
.gb-slider__btn--prev { left: -18px; }
.gb-slider__btn--next { right: -18px; }
}
#gherb-blog .gb-articles__grid[data-slider] {
display: flex !important;
grid-template-columns: none !important;
overflow-x: auto;
overflow-y: hidden;
scroll-behavior: smooth;
scroll-snap-type: x proximity;
scrollbar-width: none;
padding: 4px 0;
-webkit-overflow-scrolling: touch;
touch-action: pan-x pan-y;
scroll-padding-inline: 4px;
overscroll-behavior-x: contain;
min-width: 0;
}
#gherb-blog .gb-articles__grid[data-slider]::-webkit-scrollbar { display: none; }
#gherb-blog .gb-articles__grid[data-slider] {
gap: 20px;
}
#gherb-blog .gb-articles__grid[data-slider] > * {
scroll-snap-align: start; flex: 0 0 auto;
width: calc((100% - 40px) / 3); }
@media (max-width: 768px) {
#gherb-blog .gb-articles__grid[data-slider] { gap: 12px; }
#gherb-blog .gb-articles__grid[data-slider] > * {
width: 100%; scroll-snap-align: center;
}
}