/* ========== AKK Premium Base Styles ========== */
/* Font: Kanit, mobile-first, Thai-friendly */
/* Theme: Minimal White + Deep Green */

@import url('https://fonts.googleapis.com/css2?family=Kanit:wght@400;500;600&display=swap');

:root {
  --bg-body:#ffffff;
  --bg-page:#ffffff;
  --bg-card:#ffffff;
  --bg-card-soft:#F9FAF9; /* เบจบางๆ / เทาเขียวจาง */

  --ink:#111111;
  --ink-muted:#6B7280;

  --brand:#1B7F6B;
  --brand-hover:#20937B;

  --border:#E5E7EB;
  --radius-lg:16px;
  --radius-md:12px;
  --radius-sm:8px;

  --shadow-card:0 12px 32px rgba(0,0,0,.06);
  --shadow-header:0 4px 16px rgba(0,0,0,.04);

  --container-max:1200px;
  --header-h-mobile:64px;
  --header-h-desktop:72px;
}

*,
*::before,
*::after {
  box-sizing:border-box;
  -webkit-font-smoothing:antialiased;
}

body {
  margin:0;
  font-family:'Kanit', system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  background:var(--bg-body);
  color:var(--ink);
  line-height:1.5;
  min-height:100dvh;
  display:flex;
  flex-direction:column;
}

img {
  max-width:100%;
  height:auto;
  display:block;
  border-radius:var(--radius-sm);
}

h1,h2,h3,h4,h5,h6 {
  color:var(--ink);
  line-height:1.3;
  font-weight:600;
  margin:0 0 .5em;
}

p {
  color:var(--ink-muted);
  font-size:1rem;
  line-height:1.6;
  margin:0 0 1em;
}

a {
  color:inherit;
  text-decoration:none;
}

button {
  font-family:inherit;
}

/* Layout helpers */
.container {
  max-width:var(--container-max);
  margin-inline:auto;
  padding:16px;
}

@media(min-width:768px){
  .container{
    padding:24px;
  }
}

/* ========= MAIN CARD SHELL ========= */
.page-shell {
  background:var(--bg-page);
  box-shadow:var(--shadow-card);
  border-radius:var(--radius-lg);
  border:1px solid var(--border);
  width:100%;
  /* ลดช่องว่างข้างล่างให้ใกล้ footer */
  margin:16px auto 4px;
  max-width:var(--container-max);
  overflow:hidden;
}

@media(min-width:768px){
  .page-shell{
    margin-top:24px;
    margin-bottom:6px;
  }
}

/* ========== Header / Nav ========== */

.site-header {
  position:sticky;
  top:0;
  z-index:1000;
  background:#ffffff;
  box-shadow:var(--shadow-header);
  border-bottom:1px solid var(--border);
  display:flex;
  align-items:center;
}

.header-inner{
  max-width:var(--container-max);
  padding:0 16px;
  margin:auto;
  display:flex;
  align-items:center;
  justify-content:space-between;
  width:100%;
  gap:16px;
}

@media(min-width:768px){
  .header-inner{
    padding:0 24px;
  }
}

/* โลโก้ + ข้อความแบรนด์ */
/* รองรับทั้ง .brand และ .brand-block */
.brand,
.brand-block{
  display:flex;
  align-items:center;
  gap:10px;
  text-decoration:none;
  color:var(--brand);
  font-weight:600;
  font-size:1.125rem; /*18px*/
}

.brand-logo{
  display:block;
  height:40px;
  width:auto;
}

@media(max-width:480px){
  .brand-logo{
    height:34px;
  }
}

.brand-text{
  display:flex;
  flex-direction:column;
  line-height:1.1;
}
.brand-text strong{
  font-weight:800;
  letter-spacing:.04em;
}
.brand-text small{
  font-size:.7rem;
  font-weight:500;
  color:var(--ink);
  opacity:.6;
  letter-spacing:.25em;
}

/* เมนูเดสก์ท็อป */
.nav-desktop{
  display:flex;
  align-items:center;
  gap:24px;
  margin-left:auto;
  color:var(--ink);
  font-size:.95rem;
  font-weight:500;
}

.nav-desktop a{
  color:var(--ink);
  opacity:.9;
}
.nav-desktop a:hover{
  color:var(--brand);
}

/* ปุ่มสามขีด (มือถือ) */
.hamburger-btn{
  background:none;
  border:0;
  padding:8px;
  cursor:pointer;
  border-radius:var(--radius-sm);
  line-height:0;
  display:flex;
  align-items:center;
  justify-content:center;
}

.hamburger-btn svg{
  width:24px;
  height:24px;
  stroke:var(--ink);
  stroke-width:2;
}

/* เดสก์ท็อป: ซ่อนปุ่มสามขีด */
@media(min-width:768px){
  .hamburger-btn{
    display:none;
  }
}

/* mobile menu panel */
.mobile-menu-backdrop{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.4);
  display:none;
  z-index:1100;
}
.mobile-menu-backdrop.active{
  display:block;
}

.mobile-menu{
  position:fixed;
  right:16px;
  left:16px;
  top:16px;
  background:#fff;
  border-radius:var(--radius-md);
  box-shadow:var(--shadow-card);
  border:1px solid var(--border);
  padding:16px;
  display:flex;
  flex-direction:column;
  gap:16px;
  max-width:320px;
  margin-left:auto;
}

.mobile-menu a{
  font-size:1rem;
  font-weight:500;
  color:var(--ink);
  padding:8px 0;
  border-bottom:1px solid var(--border);
}
.mobile-menu a:last-child{
  border-bottom:0;
}

.mobile-menu-close{
  align-self:flex-end;
  background:none;
  border:0;
  padding:8px;
  border-radius:var(--radius-sm);
  line-height:0;
}
.mobile-menu-close svg{
  width:24px;
  height:24px;
  stroke:var(--ink);
  stroke-width:2;
}

/* มือถือ: ซ่อน nav-desktop, โชว์ปุ่มสามขีด */
@media(max-width:820px){
  .nav-desktop{ display:none; }
  .hamburger-btn{ display:inline-flex; align-items:center; justify-content:center; }
}

/* ========== Breadcrumb ========== */

.breadcrumb{
  font-size:.9rem;
  color:var(--ink-muted);
  margin-bottom:16px;
  display:flex;
  flex-wrap:wrap;
  gap:6px;
}
.breadcrumb a{
  color:var(--ink-muted);
}
.breadcrumb .sep{
  color:var(--ink-muted);
  opacity:.6;
}

/* ========== Hero (หน้าแรก) ========== */

.hero{
  text-align:center;
  padding:24px 16px 16px;
}

@media(min-width:768px){
  .hero{
    padding:48px 24px 24px;
  }
}

.hero h1{
  color:var(--brand);
  font-weight:600;
  font-size:1.5rem;
  line-height:1.3;
  margin-bottom:8px;
}
@media(min-width:768px){
  .hero h1{
    font-size:2rem;
  }
}

.hero .sub{
  max-width:500px;
  margin:0 auto 24px;
  color:var(--ink-muted);
  font-size:1rem;
  line-height:1.6;
}

.cta-row{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:12px;
}

.btn-solid{
  background:var(--brand);
  color:#fff;
  border:1px solid var(--brand);
  border-radius:var(--radius-sm);
  padding:10px 16px;
  font-size:1rem;
  font-weight:500;
  line-height:1.3;
}
.btn-solid:hover{
  background:var(--brand-hover);
  border-color:var(--brand-hover);
}

.btn-outline{
  background:#fff;
  color:var(--ink);
  border:1.5px solid var(--ink);
  border-radius:var(--radius-sm);
  padding:10px 16px;
  font-size:1rem;
  font-weight:500;
  line-height:1.3;
}
.btn-outline:hover{
  border-color:var(--brand);
  color:var(--brand);
}

/* ========== Section Card Wrapper (หน้าแรก + ส่วนอื่น) ========== */

.section-block{
  background:#fff;
  border-top:1px solid var(--border);
  padding:16px;
}

@media(min-width:768px){
  .section-block{
    padding:24px;
  }
}

.card-list-wrap{
  background:var(--bg-card-soft);
  border:1px solid var(--border);
  border-radius:var(--radius-md);
  box-shadow:var(--shadow-card);
  padding:16px;
}

.section-title{
  font-size:1.125rem;
  font-weight:600;
  color:var(--ink);
  margin:0 0 16px;
}
@media(min-width:768px){
  .section-title{
    font-size:1.25rem;
  }
}

/* horizontal scroll on mobile, grid on desktop */
.card-scroll{
  display:flex;
  gap:16px;
  overflow-x:auto;
  padding-bottom:4px;
  scroll-snap-type:x mandatory;
}
.card-scroll::-webkit-scrollbar{
  display:none;
}

@media(min-width:640px){
  .card-scroll{
    flex-wrap:wrap;
    overflow-x:visible;
  }
}

/* product category card */
.cat-card{
  min-width:140px;
  background:#fff;
  border:1px solid var(--border);
  border-radius:var(--radius-md);
  box-shadow:var(--shadow-card);
  padding:16px;
  text-align:center;
  scroll-snap-align:start;
  flex-shrink:0;
}
@media(min-width:768px){
  .cat-card{
    min-width:160px;
  }
}
.cat-icon{
  width:48px;
  height:48px;
  margin:0 auto 12px;
  color:var(--brand);
}
.cat-icon svg{
  width:48px;
  height:48px;
  stroke:var(--brand);
  stroke-width:1.5;
  fill:none;
}
.cat-name{
  font-size:1rem;
  font-weight:500;
  color:var(--ink);
  line-height:1.4;
  word-break:break-word;
}

/* feature trio row (คุณภาพพรีเมียม / ผลิตตามแบบ / สกรีนโลโก้) */
.feature-grid{
  border-top:1px solid var(--border);
  padding-top:16px;
  margin-top:16px;

  display:grid;
  grid-template-columns:1fr;
  gap:24px;
  text-align:center;
}
@media(min-width:640px){
  .feature-grid{
    grid-template-columns:repeat(3,1fr);
    text-align:left;
  }
}
.feature-item{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:12px;
}
@media(min-width:640px){
  .feature-item{
    flex-direction:row;
    align-items:flex-start;
  }
}
.feature-icon{
  width:40px;
  height:40px;
  flex-shrink:0;
  color:var(--brand);
  display:flex;
  align-items:center;
  justify-content:center;
  border:2px solid var(--brand);
  border-radius:var(--radius-md);
  font-size:20px;
  font-weight:500;
  line-height:1;
}
.feature-text{
  font-size:1rem;
  font-weight:500;
  color:var(--ink);
  line-height:1.4;
}

/* ========== contact / info cards layout (contact.html + about.html bottom cards) ========== */

.info-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:16px;
}

@media(min-width:768px){
  .info-grid.two-col{
    grid-template-columns:1fr 1fr;
  }
}

.info-card{
  background:var(--bg-card-soft);
  border:1px solid var(--border);
  border-radius:var(--radius-md);
  box-shadow:var(--shadow-card);
  padding:16px;
  font-size:1rem;
  line-height:1.5;
  color:var(--ink);
}

.info-card h3{
  margin-top:0;
  color:var(--ink);
  font-size:1.125rem;
  font-weight:600;
  line-height:1.4;
  margin-bottom:8px;
}

.info-line{
  display:flex;
  align-items:flex-start;
  gap:8px;
  font-size:1rem;
  margin-bottom:8px;
  color:var(--ink);
}

.info-line .icon{
  width:20px;
  height:20px;
  flex-shrink:0;
  color:var(--brand);
  stroke:var(--brand);
}

.map-box{
  background:#fff;
  border:1px solid var(--border);
  border-radius:var(--radius-sm);
  box-shadow:var(--shadow-card);
  height:120px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:.9rem;
  color:var(--ink-muted);
  margin-top:12px;
}

/* small form */
.form-group{
  display:flex;
  flex-direction:column;
  margin-bottom:12px;
}
.form-group label{
  font-size:.9rem;
  font-weight:500;
  color:var(--ink);
  margin-bottom:4px;
}
.form-group input,
.form-group textarea{
  font-family:inherit;
  font-size:1rem;
  padding:10px 12px;
  border-radius:var(--radius-sm);
  border:1px solid var(--border);
  line-height:1.4;
  background:#fff;
}
.form-group textarea{
  min-height:96px;
  resize:vertical;
}

/* ========== About page specific ========== */

.about-headline{
  font-size:1.5rem;
  font-weight:600;
  color:var(--ink);
  line-height:1.3;
  margin-bottom:4px;
}
@media(min-width:768px){
  .about-headline{
    font-size:1.75rem;
  }
}

.about-sub{
  font-size:1rem;
  color:var(--ink);
  font-weight:500;
  line-height:1.5;
  margin-bottom:16px;
}

.about-layout{
  display:grid;
  grid-template-columns:1fr;
  gap:16px;
  margin-bottom:16px;
}
@media(min-width:768px){
  .about-layout{
    grid-template-columns:1fr 1fr;
    align-items:start;
    gap:24px;
  }
}

.check-list{
  font-size:1rem;
  line-height:1.6;
  color:var(--ink);
  padding-left:0;
  list-style:none;
  margin:0 0 16px;
}
.check-list li{
  display:flex;
  align-items:flex-start;
  gap:8px;
  margin-bottom:8px;
}
.check-list .tick{
  color:var(--brand);
  font-weight:600;
  line-height:1.2;
}

/* bottom highlight cards in about */
.highlight-row{
  background:var(--bg-card-soft);
  border:1px solid var(--border);
  border-radius:var(--radius-md);
  box-shadow:var(--shadow-card);
  padding:16px;
  display:grid;
  grid-template-columns:1fr;
  gap:16px;
  margin-top:16px;
  text-align:center;
}
@media(min-width:768px){
  .highlight-row{
    grid-template-columns:repeat(3,1fr);
    text-align:left;
  }
}

.highlight-item{
  display:flex;
  flex-direction:column;
  gap:8px;
  align-items:center;
}
@media(min-width:768px){
  .highlight-item{
    flex-direction:row;
    align-items:flex-start;
  }
}
.highlight-icon{
  width:40px;
  height:40px;
  border-radius:var(--radius-md);
  border:2px solid var(--brand);
  color:var(--brand);
  font-size:20px;
  font-weight:500;
  line-height:40px;
  text-align:center;
  flex-shrink:0;
}
.highlight-text{
  font-size:1rem;
  font-weight:500;
  color:var(--ink);
  line-height:1.4;
}

.about-cta-wrap{
  display:flex;
  flex-direction:column;
  align-items:stretch;
  gap:16px;
  margin-top:16px;
}
@media(min-width:768px){
  .about-cta-wrap{
    align-items:flex-start;
  }
}

/* ========== Category grid (products page) ========== */

.category-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:16px;
}

@media(min-width:600px){
  .category-grid{
    grid-template-columns:repeat(3,1fr);
  }
}

@media(min-width:900px){
  .category-grid{
    grid-template-columns:repeat(4,1fr);
  }
}

.category-card{
  background:#fff;
  border:1px solid var(--border);
  border-radius:var(--radius-md);
  box-shadow:var(--shadow-card);
  padding:16px;
  text-align:center;
  display:flex;
  flex-direction:column;
  gap:12px;
  min-height:170px;
  justify-content:center;
}
.category-card .cat-icon{
  margin-bottom:0;
}
.category-card .cat-name{
  font-weight:500;
}

/* ========== Add LINE CTA row (footer block) ========== */
/* (เก็บไว้เผื่อใช้หน้าอื่น ปุ่ม Facebook ใช้ .footer-cta/.fb-follow-btn) */

.line-cta-block{
  background:#fff;
  border-top:1px solid var(--border);
  padding:16px;
  text-align:center;
}

@media(min-width:768px){
  .line-cta-block{
    padding:24px;
  }
}

.add-line-btn{
  background:var(--brand);
  color:#fff;
  border:1px solid var(--brand);
  border-radius:var(--radius-sm);
  font-size:1rem;
  font-weight:500;
  line-height:1.3;
  padding:10px 16px;
  display:inline-block;
  min-width:140px;
  text-align:center;
}
.add-line-btn:hover{
  background:var(--brand-hover);
  border-color:var(--brand-hover);
}

/* ===== Facebook CTA (Follow us on Facebook button) ===== */
.footer-cta{
  background:#fff;
  border-top:1px solid var(--border);
  padding:6px 16px 0;   /* เตี้ยลง */
  text-align:center;
}
@media (min-width:768px){
  .footer-cta{
    padding:8px 24px 0;
  }
}

/* ปุ่ม Facebook แบบไม่ใช้รูปภาพ */
.fb-follow-btn{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:10px 22px;
  border-radius:999px;
  background:linear-gradient(90deg,#1877f2,#4c9cff);
  color:#fff;
  text-decoration:none;
  box-shadow:0 10px 18px rgba(24,119,242,.35);
  font-size:0.95rem;
  font-weight:500;
}

.fb-follow-btn:hover{
  filter:brightness(1.05);
  transform:translateY(-1px);
}

.fb-icon{
  width:32px;
  height:32px;
  border-radius:50%;
  background:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:700;
  font-size:20px;
  color:#1877f2;
}

.fb-text{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  line-height:1.1;
}

.fb-label{
  font-size:0.78rem;
  opacity:.9;
}

.fb-brand{
  font-size:1rem;
  font-weight:600;
}

/* ข้อความลิขสิทธิ์ footer */
.footer-copy{
  font-size:.8rem;
  color:var(--ink-muted);
  margin-top:2px;
  text-align:center;
}

/* sticky footer helper if page is short */
.site-footer{
  margin-top:auto;
  padding:0 0 10px;
}

/* บีบ padding ของ container ใน footer ให้เตี้ยลง */
.site-footer .container{
  text-align:center;
  padding:4px 16px 0;
}

@media (min-width:768px){
  .site-footer .container{
    padding:4px 24px 0;
  }
}

/* Utility spacing */
.mb-0{margin-bottom:0}
.mb-8{margin-bottom:8px}
.mb-12{margin-bottom:12px}
.mb-16{margin-bottom:16px}
.mb-24{margin-bottom:24px}
.text-center{text-align:center}
.text-brand{color:var(--brand)}
.fw-500{font-weight:500}

/* ปรับ header ให้สูงขึ้น ดูเต็มขึ้น */
.site-header .header-inner{
  padding-block:12px;
}

.brand-logo{
  height:44px;
}
@media (max-width:480px){
  .brand-logo{
    height:38px;
  }
}