#gherb-contact {
--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-contact *, #gherb-contact *::before, #gherb-contact *::after { box-sizing: border-box; }
#gherb-contact h1, #gherb-contact h2, #gherb-contact h3,
#gherb-contact h4, #gherb-contact p, #gherb-contact span,
#gherb-contact a { margin: 0; padding: 0; }
#gherb-contact img { display: block; max-width: 100%; height: auto; } #gherb-contact .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-contact .g-section-header { text-align: center; margin-bottom: 52px; }
#gherb-contact .g-section-header h2 { font-size: 36px; font-weight: 700; line-height: 1.3; margin: 0 0 12px; }
#gherb-contact .g-section-header p  { font-size: 16px; color: #4b5b67; margin: 0; } #gherb-contact .g-btn {
display: inline-block !important;
padding: 13px 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-contact .g-btn:hover          { opacity: .85; }
#gherb-contact .g-btn--green         { background: #1b5e20 !important; color: #fff !important; }
#gherb-contact .g-btn--white         { background: #fff !important; color: #1b5e20 !important; }
#gherb-contact .g-btn--outline       { background: transparent !important; border: 2px solid #1b5e20 !important; color: #1b5e20 !important; }
#gherb-contact .g-btn--outline-white { background: transparent !important; border: 2px solid #fff !important; color: #fff !important; }
#gherb-contact .g-btn--full          { width: 100%; text-align: center; } .gco-container { max-width: 90%; margin: 0 auto; padding: 0 72px; }
.gco-section   { padding: 80px 0; } .gco-hero { position: relative ;
aspect-ratio: 16 / 7 ;
height: auto ; overflow: hidden ;
margin: 24px ;
border-radius: 100px 0 100px 0 ;
}
.gco-hero__inner {
position: relative;
height: 100%;
background-size: cover;
background-position: center center;
background-repeat: no-repeat;
display: flex;
align-items: center;
}
.gco-hero__content {
position: relative;
z-index: 1;
padding: 0 80px;
color: #fff;
max-width: 50%;
}
.gco-hero__content .g-badge {
background: rgba(255,255,255,.2);
color: #fff;
}
.gco-hero__content h1 {
font-size: 64px; font-weight: 700;
line-height: 1.2; margin: 0 0 16px; color: #fff;
padding: 10px 0  !important;
}
.gco-hero__content p {
font-size: 16px; line-height: 1.7;
color: rgba(255,255,255,.88); margin: 0 0 24px;
} .gco-info__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; }
.gco-info__left h2 { font-size: 34px; font-weight: 700; line-height: 1.3; margin: 8px 0 16px; }
.gco-info__sub { font-size: 15px; color: #4b5b67; line-height: 1.7; margin: 0 0 32px; }
.gco-info__right { display: flex; flex-direction: column; gap: 16px; }
.gco-map__placeholder { width: 100%; height: 260px; border-radius: 16px; overflow: hidden; background: #e8f0e8; }
.gco-info__details { display: flex; flex-direction: column; gap: 14px; }
.gco-info__detail-item {
display: flex; gap: 12px; align-items: flex-start;
}
.gco-info__detail-item svg,
.gco-info__detail-item img { flex-shrink: 0; margin-top: 2px; }
.gco-info__detail-item strong { display: block; font-size: 14px; font-weight: 700; color: #0e1e3f; margin-bottom: 2px; }
.gco-info__detail-item p { margin: 0; font-size: 13px; color: #4b5b67; line-height: 1.6; } .gco-channels__layout {
display: grid; grid-template-columns: 60% 35%; gap: 5%; align-items: center;
}
.gco-channels__cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.gco-channel-card {
border: 1.5px solid #c8e6c9; border-radius: 16px; padding: 24px 20px;
background: #fff; display: flex; flex-direction: column; gap: 14px;
height: 100%;
}
.gco-channel-card__icon {
width: 44px; height: 44px; border-radius: 10px;
display: flex; align-items: center; justify-content: center;
align-self: center;
}
.gco-channel-card h3 { font-size: 15px; font-weight: 700; margin: 0; color: #0e1e3f; text-align: center; }
.gco-channel-card__list {
list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px;
margin-top: auto;
}
.gco-channel-card__list li {
display: flex; align-items: flex-start; gap: 8px;
font-size: 13px; color: #4b5b67; line-height: 1.5;
}
.gco-channel-card__list li svg { flex-shrink: 0; margin-top: 2px; }
.gco-channel-card__top { display: flex; flex-direction: column; gap: 14px; flex: 1; }
.gco-channel-card__btn { font-size: 13px !important; padding: 10px 16px !important; text-align: center; line-height: 1.5; display: block !important; }
.gco-channels__text { display: flex; flex-direction: column; gap: 16px; text-align: right; align-items: flex-end; }
.gco-channels__text h2 { font-size: 32px; font-weight: 700; line-height: 1.3; color: #0e1e3f; margin: 0; }
.gco-channels__text p  { font-size: 15px; color: #4b5b67; line-height: 1.7; margin: 0; } .gco-form__grid { display: grid; grid-template-columns: 30% 60%; gap: 10%; }
.gco-form__header h2 { font-size: 34px; font-weight: 700; line-height: 1.3; margin: 0 0 16px; color: #0e1e3f; }
.gco-form__header p  { font-size: 15px; color: #4b5b67; line-height: 1.7; margin: 0; }
.gco-form__card {
border: 1.5px solid #d0e4d0; border-radius: 20px;
padding: 36px 32px; background: #fff;
}
.gco-form__alert {
padding: 14px 18px;
border-radius: 12px;
font-size: 14px;
margin-bottom: 20px;
line-height: 1.6;
}
.gco-form__alert--success {
background: #e8f5e9;
color: #1b5e20;
border: 1px solid #c8e6c9;
}
.gco-form__alert--error {
background: #ffebee;
color: #c62828;
border: 1px solid #ffcdd2;
}
.gco-form        { display: flex; flex-direction: column; gap: 16px; }
.gco-form__row   { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.gco-form__field { display: flex; flex-direction: column; gap: 8px; }
.gco-form__label { font-size: 14px; font-weight: 600; color: #0e1e3f; }
.gco-form__field input,
.gco-form__field textarea {
padding: 12px 0 !important;
border: none !important;
border-bottom: 1.5px solid #d0e4d0 !important;
border-radius: 0 !important;
box-shadow: none !important;
font-size: 14px !important; font-family: "Kanit", sans-serif !important;
color: #0e1e3f !important; background: transparent !important; outline: none !important;
transition: border-color .2s;
}
.gco-form__field input:focus,
.gco-form__field textarea:focus { border-bottom-color: #1b5e20 !important; }
.gco-form__field input::placeholder,
.gco-form__field textarea::placeholder { color: #b0bec5; }
.gco-form__field textarea { resize: none; overflow: hidden; min-height: 44px; } .gco-subject__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.gco-subject-btn {
padding: 11px 16px; border-radius: 999px; font-size: 14px; font-weight: 500;
font-family: "Kanit", sans-serif; cursor: pointer; transition: all .2s;
border: 1.5px solid #1b5e20; background: #fff; color: #1b5e20;
}
.gco-subject-btn--active { background: #1b5e20; color: #fff; }
.gco-subject-btn:hover:not(.gco-subject-btn--active) { background: #e8f5e9; }
.gco-form__note { font-size: 12px; color: #9aaab4; text-align: center; margin: 0; line-height: 1.5; } .gco-faq__list { width: 100%; }
.gco-faq-item { border-bottom: 1px solid #e0e8e0; }
.gco-faq-item__q {
width: 100%; display: flex; justify-content: space-between; align-items: center;
padding: 20px 0; background: none; border: none; font-size: 16px; font-weight: 600;
color: #0e1e3f; cursor: pointer; text-align: left; font-family: "Kanit", sans-serif; gap: 16px;
}
.gco-faq-item__arrow { transition: transform .2s; flex-shrink: 0; font-size: 32px; }
.gco-faq-item.open .gco-faq-item__arrow { transform: rotate(180deg); }
.gco-faq-item__a { max-height: 0; overflow: hidden; transition: max-height .3s ease; }
.gco-faq-item.open .gco-faq-item__a { max-height: 200px; }
.gco-faq-item__a p { padding: 0 0 20px; font-size: 15px; color: #4b5b67; line-height: 1.7; margin: 0; }  @media (max-width: 1200px) {
.gco-container { padding: 0 40px; }
.gco-hero { aspect-ratio: auto; height: 720px; max-height: none; }
.gco-hero__content { padding: 0 60px; }
.gco-hero__content h1 { font-size: 36px; }
.gco-info__left h2 { font-size: 28px; }
.gco-channels__text h2 { font-size: 28px; }
.gco-form__header h2 { font-size: 28px; }
} @media (max-width: 900px) {
.gco-section { padding: 64px 0; }
.gco-hero {
aspect-ratio: auto;
height: 560px;
max-height: none;
border-radius: 60px 0 60px 0;
margin: 16px;
}
.gco-hero__content { padding: 0 40px; max-width: 90%; }
.gco-hero__content h1 { font-size: 32px; }
.gco-hero__content p { font-size: 14px; }
.gco-info__grid { grid-template-columns: 1fr; gap: 36px; }
.gco-info__left h2 { font-size: 26px; }
.gco-info__sub { margin-bottom: 20px; }
.gco-map__placeholder { height: 320px; }
.gco-channels__layout { grid-template-columns: 1fr; gap: 36px; }
.gco-channels__cards { grid-template-columns: repeat(3, 1fr); gap: 12px; }
.gco-channels__text { text-align: left; align-items: flex-start; }
.gco-channels__text h2 { font-size: 26px; }
.gco-form__grid { grid-template-columns: 1fr; gap: 32px; }
.gco-form__header h2 { font-size: 26px; }
.gco-form__card { padding: 32px 28px; }
} @media (max-width: 768px) {
.gco-container { padding: 0 24px; }
.gco-section { padding: 48px 0; }
.gco-hero {
aspect-ratio: auto;
height: 480px;
max-height: none;
margin: 12px;
border-radius: 32px;
}
.gco-hero__inner {
align-items: flex-end;
position: relative;
}
.gco-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;
}
.gco-hero__content {
position: relative;
z-index: 1;
padding: 0 24px 36px;
max-width: none;
width: 100%;
}
.gco-hero__content h1 {
font-size: 26px;
line-height: 1.3;
margin-bottom: 12px;
text-shadow: 0 2px 12px rgba(0,0,0,.25);
}
.gco-hero__content p {
font-size: 14px;
color: rgba(255,255,255,.92);
line-height: 1.65;
}
.gco-hero__content br { display: none; }
.gco-info__left h2 { font-size: 22px; }
.gco-info__sub { font-size: 14px; }
.gco-map__placeholder { height: 240px; }
.gco-channels__cards { grid-template-columns: 1fr; gap: 14px; }
.gco-channel-card { padding: 20px 18px; }
.gco-channels__text h2 { font-size: 22px; }
.gco-form__row { grid-template-columns: 1fr; gap: 12px; }
.gco-form__header h2 { font-size: 22px; }
.gco-form__header p { font-size: 14px; }
.gco-form__card { padding: 24px 20px; }
.gco-subject__grid { grid-template-columns: 1fr; }
.gco-faq-item__q { font-size: 14px; padding: 16px 0; gap: 12px; }
.gco-faq-item__arrow { font-size: 24px; }
.gco-faq-item__a p { font-size: 13px; padding: 0 0 16px; }
} @media (max-width: 480px) {
.gco-container { padding: 0 16px; }
.gco-hero { aspect-ratio: auto; height: 440px; max-height: none; }
.gco-hero__content { padding: 0 20px 28px; }
.gco-hero__content h1 { font-size: 22px; line-height: 1.35; }
.gco-hero__content p { font-size: 12px; }
.gco-info__left h2 { font-size: 20px; }
.gco-channels__text h2,
.gco-form__header h2 { font-size: 20px; }
.gco-form__card { padding: 20px 16px; }
.gco-faq-item__q { font-size: 13px; }
}