/*
  KOCO GLOBAL — Website stylesheet
  Hướng thiết kế: "Formulation Dossier" — hồ sơ/chứng nhận, giấy ấm, dấu mộc kỹ thuật.
  Màu nhấn chính: Koco Sage (#CBCDA3) theo đúng bộ nhận diện thương hiệu.

  GHI CHÚ CHUYỂN WORDPRESS (đọc trước khi convert):
  - File này map trực tiếp thành style.css của theme (giữ nguyên tên + vị trí gốc).
  - .site-header  -> header.php
  - .site-footer  -> footer.php
  - .hero, .section-* -> mỗi block là 1 template part (template-parts/section-*.php)
  - .btn, .card, .badge -> có thể tách thành components.css riêng nếu theme lớn dần
  - main.js -> có thể enqueue nguyên vẹn qua wp_enqueue_script
*/

/* ========== 1. Design tokens ========== */
:root{
  --paper:#EBE6DD;        /* Warm Stone - nền chính */
  --paper-alt:#F5F2EA;    /* tông sáng hơn cho card/alternating section */
  --paper-deep:#DED7C6;   /* viền / chia khối trên nền giấy */
  --ink:#333333;          /* màu chữ chính (brand ink) */
  --ink-soft:#68624F;     /* chữ phụ / mô tả */
  --ink-faint:#5C5646;    /* chú thích, nhãn nhỏ — đạt tối thiểu 4.5:1 trên nền paper/paper-alt */
  --sage:#CBCDA3;         /* Koco Sage - accent chính */
  --sage-deep:#5F6440;    /* sage đậm hơn, dùng cho text/icon cần tương phản — đạt tối thiểu 4.5:1 */
  --sage-ink:#3A3D26;     /* chữ đặt trên nền sage sáng */
  --white:#FFFFFF;
  --border:#D9D2BE;

  /* Chỉ còn 1 họ chữ hiển thị (Zilla Slab, kể cả logo/trích dẫn dùng nghiêng) thay vì thêm Playfair Display riêng —
     gọn giọng chữ, giảm số font phải tải. */
  --font-display:'Zilla Slab','Noto Serif KR',Georgia,serif;
  --font-body:'IBM Plex Sans','IBM Plex Sans KR',-apple-system,'Segoe UI',sans-serif;
  --font-mono:'IBM Plex Mono',ui-monospace,'SFMono-Regular',monospace;

  --container:1180px;
  --radius-s:3px;
  --radius-m:8px;
  --shadow-card:0 18px 40px -28px rgba(51,47,39,.35);
}

/* ========== 2. Reset & base ========== */
*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
ul{list-style:none;margin:0;padding:0;}
button{font:inherit;cursor:pointer;}
h1,h2,h3,h4{
  font-family:var(--font-display);
  font-weight:700;
  line-height:1.25;
  margin:0 0 .5em;
  text-wrap:balance;
}
p{margin:0 0 1em;}
:focus-visible{outline:2px solid var(--sage-deep);outline-offset:3px;}
.container{max-width:var(--container);margin:0 auto;padding:0 24px;}
.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  *{animation-duration:.001ms !important;transition-duration:.001ms !important;}
}

/* progressive-enhancement reveal: mặc định LUÔN hiện; JS chỉ thêm hiệu ứng nhẹ khi hỗ trợ */
.reveal{opacity:1;transform:none;}
.js-anim .reveal{opacity:0;transform:translateY(14px);transition:opacity .6s ease,transform .6s ease;}
.js-anim .reveal.is-visible{opacity:1;transform:none;}

/* ========== 3. Buttons & badges ========== */
.btn{
  display:inline-flex;align-items:center;gap:8px;
  font-family:var(--font-body);font-weight:600;font-size:14px;
  padding:13px 26px;border-radius:var(--radius-s);border:1px solid transparent;
  white-space:nowrap;
}
.btn-primary{background:var(--ink);color:var(--paper);}
.btn-primary:hover{background:#4a4536;}
.btn-outline{background:transparent;color:var(--ink);border-color:var(--ink);}
.btn-outline:hover{background:var(--ink);color:var(--paper);}
.btn-sage{background:var(--sage);color:var(--sage-ink);}
.btn-sage:hover{background:var(--sage-deep);color:var(--white);}
.btn-block{width:100%;justify-content:center;}

.eyebrow{
  font-family:var(--font-mono);font-size:11.5px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--sage-deep);
  display:inline-flex;align-items:center;gap:8px;margin-bottom:14px;
}
.eyebrow::before{content:"";width:18px;height:1px;background:var(--sage-deep);}

.badge{
  display:inline-flex;align-items:center;
  font-family:var(--font-mono);font-size:11px;letter-spacing:.04em;
  background:var(--paper-alt);border:1px solid var(--border);
  color:var(--ink-soft);padding:4px 10px;border-radius:999px;
}

/* ========== 4. Header / Nav ========== */
.site-header{
  position:sticky;top:0;z-index:50;
  background:var(--paper);
  border-bottom:1px solid var(--border);
}
.nav{
  display:flex;align-items:center;justify-content:space-between;
  padding:18px 0;
}
.nav-logo{display:flex;flex-direction:row;align-items:center;gap:9px;}
.nav-logo .logo-text{display:flex;flex-direction:column;line-height:1.1;}
.nav-logo .mark{
  font-family:var(--font-display);font-style:italic;font-weight:700;
  font-size:22px;letter-spacing:.01em;color:var(--ink);
}

/* 실제 로고 이미지 — 원본이 정사각 캔버스라 CSS로 필요한 부분만 잘라서 표시 */
.brand-logo{display:inline-block;overflow:hidden;position:relative;vertical-align:middle;}
.brand-logo img{position:absolute;max-width:none;}
.brand-logo.size-nav{width:143px;height:26px;}
.brand-logo.size-nav img{width:203px;height:203px;left:-35px;top:-77px;}
.brand-logo.size-footer{width:176px;height:32px;}
.brand-logo.size-footer img{width:250px;height:250px;left:-43px;top:-104px;}

/* KG 원형 모노그램 배지 — 오벌 로고 중심으로 확대 크롭 */
.brand-mark{display:inline-block;overflow:hidden;position:relative;vertical-align:middle;flex:none;}
.brand-mark img{width:100%;height:100%;object-fit:cover;transform:scale(2.05);transform-origin:48% 50%;}
.brand-mark.size-nav{width:30px;height:30px;}
.brand-mark.size-footer{width:36px;height:36px;}

.footer-brand-row{display:flex;align-items:center;gap:10px;margin-bottom:4px;}
.nav-logo .tag{
  font-family:var(--font-mono);font-size:9.5px;letter-spacing:.1em;
  color:var(--ink-faint);text-transform:uppercase;margin-top:2px;
}
.nav-links{display:flex;align-items:center;gap:34px;}
.nav-links a{
  font-size:14.5px;color:var(--ink-soft);position:relative;padding:4px 0;
}
.nav-links a:hover,.nav-links a[aria-current="page"]{color:var(--ink);}
.nav-links a[aria-current="page"]::after{
  content:"";position:absolute;left:0;right:0;bottom:-4px;height:2px;background:var(--sage-deep);
}
.nav-cta{display:flex;align-items:center;gap:18px;}
.nav-phone{
  font-family:var(--font-mono);font-size:13px;color:var(--ink-soft);
  display:flex;align-items:center;gap:6px;
}
.nav-toggle{
  display:none;background:none;border:none;width:34px;height:34px;
  flex-direction:column;justify-content:center;gap:5px;
}
.nav-toggle span{display:block;width:100%;height:2px;background:var(--ink);}

@media (max-width:900px){
  .nav-links{
    position:fixed;top:70px;right:0;bottom:0;left:0;background:var(--paper);
    flex-direction:column;align-items:flex-start;gap:0;
    padding:10px 24px 24px;border-top:1px solid var(--border);
    transform:translateY(-8px);opacity:0;pointer-events:none;
    transition:opacity .25s ease,transform .25s ease;
  }
  .nav-links.is-open{opacity:1;transform:none;pointer-events:auto;}
  .nav-links li{width:100%;border-bottom:1px solid var(--border);}
  .nav-links a{display:block;padding:16px 2px;font-size:16px;}
  .nav-phone{display:none;}
  .nav-toggle{display:flex;}
}

/* ========== 5. Hero ========== */
.hero{
  position:relative;padding:72px 0 64px;overflow:hidden;
}
.hero-grid{
  display:grid;grid-template-columns:1.15fr .85fr;gap:56px;align-items:center;
}
.hero h1{font-size:clamp(34px,4.4vw,54px);margin-bottom:20px;}
.hero .lede{
  font-size:17px;color:var(--ink-soft);max-width:46ch;margin-bottom:30px;
}
.hero-actions{display:flex;flex-wrap:wrap;gap:14px;margin-bottom:34px;}
.hero-stats{
  display:flex;gap:0;border-top:1px solid var(--border);padding-top:22px;
}
.hero-stats div{flex:1;padding-right:18px;}
.hero-stats .num{
  font-family:var(--font-display);font-weight:700;font-size:22px;display:block;color:var(--sage-deep);
}
.hero-stats .lbl{font-size:12px;color:var(--ink-faint);display:block;margin-top:2px;}

.hero-visual{
  position:relative;border-radius:var(--radius-m);overflow:hidden;
  box-shadow:var(--shadow-card);aspect-ratio:4/5;
}
.hero-visual img{width:100%;height:100%;object-fit:cover;transition:transform .6s ease;}
.hero-visual:hover img{transform:scale(1.045);}
.hero-visual .cap{
  position:absolute;left:0;right:0;bottom:0;
  background:linear-gradient(0deg,rgba(30,28,20,.72),transparent);
  color:#f4f1e8;padding:26px 22px 18px;font-family:var(--font-mono);font-size:11.5px;letter-spacing:.05em;
}

@media (max-width:860px){
  .hero-grid{grid-template-columns:1fr;}
  .hero-stats{flex-wrap:wrap;row-gap:16px;}
  .hero-stats div{flex:1 1 45%;}
}

/* ========== 6. Section shell ========== */
section{padding:88px 0;}
.section-alt{background:var(--paper-alt);}
.section-ink{background:var(--ink);color:var(--paper);}
.section-ink .eyebrow{color:var(--sage);}
.section-ink .eyebrow::before{background:var(--sage);}
.section-head{max-width:640px;margin-bottom:52px;}
.section-head h2{font-size:clamp(26px,3vw,36px);}
.section-head p{color:var(--ink-soft);font-size:15.5px;}
.section-ink .section-head p{color:#c9c4b0;}
.section-head.center{margin-left:auto;margin-right:auto;text-align:center;}

/* section-head-split: biến thể phá nhịp lặp lại của "eyebrow + h2 + p" xếp dọc —
   dùng cho 1-2 section muốn tạo điểm nhấn khác biệt (vd: Partners, Testimonials). */
.section-head-split{
  display:flex;justify-content:space-between;align-items:flex-end;
  gap:40px;flex-wrap:wrap;margin-bottom:52px;max-width:none;
}
.section-head-split h2{font-size:clamp(26px,3vw,36px);margin-bottom:0;max-width:20ch;}
.section-head-split .eyebrow{margin-bottom:10px;}
.section-head-split p{color:var(--ink-soft);font-size:15.5px;max-width:38ch;margin:0;}

/* ========== 7. Service cards ========== */
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--border);border:1px solid var(--border);border-radius:var(--radius-m);overflow:hidden;}
.service-card{
  background:var(--white);padding:34px 28px;display:flex;flex-direction:column;gap:14px;
  position:relative;transition:transform .25s ease,box-shadow .25s ease;
}
.service-card:hover{transform:translateY(-5px);box-shadow:var(--shadow-card);z-index:1;}
.service-card .n{font-family:var(--font-mono);font-size:12px;color:var(--sage-deep);}
.service-card .icon{width:38px;height:38px;color:var(--sage-deep);}
.service-card h3{font-size:18px;margin-bottom:2px;}
.service-card p{font-size:14px;color:var(--ink-soft);margin:0;}
.service-card a.more{font-size:13px;font-weight:600;margin-top:auto;color:var(--ink);}

@media (max-width:980px){.grid-4{grid-template-columns:repeat(2,1fr);}}
@media (max-width:560px){.grid-4{grid-template-columns:1fr;}}

/* ========== 8. Process timeline ========== */
.process{display:grid;grid-template-columns:repeat(6,1fr);gap:0;counter-reset:step;}
.process-step{
  position:relative;padding:26px 18px 0;border-top:2px solid var(--paper-deep);
}
.process-step .step-n{
  font-family:var(--font-mono);font-size:12px;color:var(--sage-deep);display:block;margin-bottom:10px;
}
.process-step h4{font-size:15px;margin-bottom:6px;}
.process-step p{font-size:12.5px;color:var(--ink-soft);margin:0;}
.process-step::before{
  content:"";position:absolute;top:-5px;left:0;width:9px;height:9px;border-radius:50%;
  background:var(--sage-deep);
}
@media (max-width:980px){.process{grid-template-columns:repeat(3,1fr);row-gap:34px;}}
@media (max-width:600px){.process{grid-template-columns:1fr 1fr;}}

/* ========== 9. Certification strip / cards ========== */
.cert-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--border);border:1px solid var(--border);border-radius:var(--radius-m);overflow:hidden;}
.cert-card{background:var(--paper-alt);padding:26px 22px;}
.cert-card .n{font-family:var(--font-mono);font-size:11px;color:var(--sage-deep);display:block;margin-bottom:8px;}
.cert-card h4{font-size:14.5px;margin-bottom:6px;}
.cert-card p{font-size:12.5px;color:var(--ink-soft);margin:0;}
@media (max-width:900px){.cert-grid{grid-template-columns:repeat(2,1fr);}}

.stamp{
  width:112px;height:112px;flex:none;
}

/* ========== 10. Partner brand strip ========== */
.brand-strip{
  display:flex;flex-wrap:wrap;gap:12px;
}
.brand-chip{
  border:1px solid var(--border);background:var(--white);
  padding:16px 22px;border-radius:var(--radius-s);flex:1 1 200px;
  transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease;
}
.brand-chip:hover{transform:translateY(-3px);box-shadow:var(--shadow-card);border-color:var(--sage-deep);}
.brand-chip .name{font-family:var(--font-display);font-weight:700;font-size:16px;display:block;}
.brand-chip .desc{font-size:12.5px;color:var(--ink-soft);margin-top:4px;display:block;}

/* ========== 11. Testimonials ========== */
.testimonial-note{
  font-family:var(--font-mono);font-size:12px;color:var(--ink-faint);
  border:1px dashed var(--border);padding:10px 16px;border-radius:var(--radius-s);
  margin-bottom:30px;max-width:60ch;background:var(--paper-alt);
}
.t-slider{position:relative;overflow:hidden;}
.t-track{display:flex;transition:transform .5s ease;}
.t-slide{flex:0 0 100%;padding:0 4px;}
.t-card{
  background:var(--white);border:1px solid var(--border);border-radius:var(--radius-m);
  padding:40px;display:grid;grid-template-columns:auto 1fr;gap:26px;align-items:start;
}
.t-card .avatar{
  width:56px;height:56px;border-radius:50%;background:var(--sage);
  display:flex;align-items:center;justify-content:center;
  font-family:var(--font-display);font-weight:700;color:var(--sage-ink);font-size:20px;
}
.t-card blockquote{margin:0 0 14px;font-size:17px;font-family:var(--font-display);font-style:italic;line-height:1.55;}
.t-card cite{font-style:normal;font-size:13px;color:var(--ink-soft);}
.t-dots{display:flex;gap:8px;justify-content:center;margin-top:22px;}
.t-dots button{width:8px;height:8px;border-radius:50%;background:var(--border);border:none;padding:0;}
.t-dots button[aria-current="true"]{background:var(--sage-deep);}

/* ========== 12. CTA banner ========== */
.cta-banner{
  background:var(--ink);color:var(--paper);border-radius:var(--radius-m);
  padding:52px 48px;display:flex;justify-content:space-between;align-items:center;gap:30px;flex-wrap:wrap;
}
.cta-banner h2{color:var(--white);margin-bottom:6px;font-size:26px;}
.cta-banner p{color:#c9c4b0;margin:0;}
.cta-banner .btn-sage{flex:none;}

/* ========== 13. Footer ========== */
.site-footer{background:var(--ink);color:#cfcabb;padding:64px 0 26px;}
.footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:40px;margin-bottom:48px;}
.footer-brand .mark{font-family:var(--font-display);font-style:italic;color:var(--white);font-size:22px;}
.footer-brand p{color:#a9a48f;font-size:13.5px;margin-top:12px;max-width:32ch;}
.site-footer h5{color:var(--white);font-size:12.5px;letter-spacing:.08em;text-transform:uppercase;margin-bottom:16px;}
.site-footer ul li{margin-bottom:10px;font-size:13.5px;}
.site-footer a:hover{color:var(--white);}
.footer-legal{
  border-top:1px solid #4a4536;padding-top:22px;
  display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;
  font-family:var(--font-mono);font-size:11.5px;color:#8b866f;
}
@media (max-width:820px){.footer-grid{grid-template-columns:1fr 1fr;}}
@media (max-width:520px){.footer-grid{grid-template-columns:1fr;}}

/* ========== 14. Page hero (trang con) ========== */
.page-hero{padding:60px 0 50px;border-bottom:1px solid var(--border);}
.page-hero h1{font-size:clamp(30px,4vw,44px);margin-bottom:12px;}
.page-hero p{color:var(--ink-soft);max-width:60ch;font-size:16px;}
.breadcrumb{font-family:var(--font-mono);font-size:11.5px;color:var(--ink-faint);margin-bottom:16px;}
.breadcrumb a{color:var(--sage-deep);}

/* ========== 15. Two-col content blocks (about/services) ========== */
.split{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center;}
.split.reverse .split-media{order:2;}
.split-media{border-radius:var(--radius-m);overflow:hidden;box-shadow:var(--shadow-card);}
.split-media img{border-radius:var(--radius-m);transition:transform .6s ease;}
.split-media:hover img{transform:scale(1.045);}
.split h2{font-size:26px;}
.split ul.check{margin-top:18px;}
.split ul.check li{
  position:relative;padding-left:26px;margin-bottom:10px;font-size:14.5px;color:var(--ink-soft);
}
.split ul.check li::before{content:"✓";position:absolute;left:0;color:var(--sage-deep);font-weight:700;}
@media (max-width:860px){.split,.split.reverse{grid-template-columns:1fr;}.split.reverse .split-media{order:0;}}

.story-slideshow{position:relative;aspect-ratio:4/3;}
.story-slideshow img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;z-index:0;transition:opacity 1s ease,transform .6s ease;}
.story-slideshow img.active{opacity:1;z-index:1;}
.split-media:hover .story-slideshow img.active{transform:scale(1.045);}

.story-nav{
  position:absolute;top:50%;z-index:2;transform:translateY(-50%);
  width:36px;height:36px;border-radius:50%;border:none;cursor:pointer;
  background:rgba(20,20,18,.4);color:var(--white);font-size:20px;line-height:1;
  display:flex;align-items:center;justify-content:center;
  opacity:0;transition:opacity .2s ease,background .2s ease;
}
.story-nav:hover{background:rgba(20,20,18,.65);}
.story-nav.prev{left:14px;}
.story-nav.next{right:14px;}
.story-slideshow:hover .story-nav{opacity:1;}
.story-dots{position:absolute;left:0;right:0;bottom:14px;z-index:2;display:flex;gap:7px;justify-content:center;}
.story-dots button{width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,.55);border:none;padding:0;cursor:pointer;}
.story-dots button[aria-current="true"]{background:var(--white);}

/* ========== 16. Manufacturer profile card (about page) ========== */
.factory-card{
  background:var(--white);border:1px solid var(--border);border-radius:var(--radius-m);
  padding:36px;display:grid;grid-template-columns:auto 1fr;gap:28px;margin-bottom:24px;
  transition:box-shadow .25s ease,transform .25s ease;
}
.factory-card:hover{box-shadow:var(--shadow-card);transform:translateY(-3px);}
.factory-card .media-banner,.factory-card .product-gallery{grid-column:1/-1;}
.factory-card .media-banner{margin-top:4px;}
.factory-card .product-gallery{margin-top:4px;margin-bottom:0;}

/* 공장/시설 실사 배너 — 큰 사진 + 캡션 오버레이 */
.media-banner{
  position:relative;border-radius:var(--radius-m);overflow:hidden;
  box-shadow:var(--shadow-card);aspect-ratio:16/7;
}
.media-banner img{width:100%;height:100%;object-fit:cover;transition:transform .6s ease;}
.media-banner:hover img{transform:scale(1.04);}
.media-banner .cap{
  position:absolute;left:0;right:0;bottom:0;
  background:linear-gradient(0deg,rgba(20,20,15,.75),transparent);
  color:#f4f1e8;padding:22px 24px 16px;font-family:var(--font-mono);font-size:11.5px;letter-spacing:.05em;
}
@media (max-width:640px){.media-banner{aspect-ratio:4/3;}}
.factory-card .stamp-mini{
  width:78px;height:78px;border-radius:50%;border:1.5px dashed var(--sage-deep);
  display:flex;align-items:center;justify-content:center;flex:none;
  font-family:var(--font-mono);font-size:10px;text-align:center;color:var(--sage-deep);line-height:1.3;
}
.factory-card h3{font-size:19px;margin-bottom:4px;}
.factory-card .meta{font-family:var(--font-mono);font-size:11.5px;color:var(--ink-faint);margin-bottom:12px;display:block;}
.factory-card .tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px;}
@media (max-width:640px){.factory-card{grid-template-columns:1fr;}.factory-card .stamp-mini{margin-bottom:6px;}}

/* ========== 17. Company fact table ========== */
.fact-table{width:100%;border-collapse:collapse;background:var(--white);border:1px solid var(--border);border-radius:var(--radius-m);overflow:hidden;}
.fact-table tr:not(:last-child) td{border-bottom:1px solid var(--border);}
.fact-table td{padding:14px 20px;font-size:14px;}
.fact-table td:first-child{color:var(--ink-faint);font-family:var(--font-mono);font-size:12px;width:38%;}

/* ========== 18. FAQ accordion ========== */
.faq-item{border-bottom:1px solid var(--border);}
.faq-q{
  width:100%;display:flex;justify-content:space-between;align-items:center;gap:20px;
  background:none;border:none;text-align:left;padding:22px 4px;font-family:var(--font-display);
  font-size:16.5px;color:var(--ink);
}
.faq-q .plus{font-family:var(--font-mono);font-size:18px;color:var(--sage-deep);transition:transform .2s ease;}
.faq-item[data-open="true"] .plus{transform:rotate(45deg);}
.faq-a{max-height:0;overflow:hidden;transition:max-height .3s ease;}
.faq-a p{padding:0 4px 22px;color:var(--ink-soft);font-size:14.5px;max-width:70ch;}

/* ========== 19. Contact page ========== */
.contact-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:56px;}
.contact-info-card{background:var(--white);border:1px solid var(--border);border-radius:var(--radius-m);padding:32px;margin-bottom:20px;}
.contact-info-card h4{font-size:13px;letter-spacing:.05em;text-transform:uppercase;color:var(--ink-faint);margin-bottom:8px;}
.contact-info-card .val{font-family:var(--font-display);font-size:19px;}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-bottom:18px;}
.field{display:flex;flex-direction:column;gap:8px;}
.field label{font-size:13px;color:var(--ink-soft);}
.field input,.field select,.field textarea{
  font-family:var(--font-body);font-size:14.5px;padding:13px 14px;
  border:1px solid var(--border);border-radius:var(--radius-s);background:var(--white);color:var(--ink);
}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--sage-deep);}
.field textarea{resize:vertical;min-height:120px;}
.form-note{font-size:12.5px;color:var(--ink-faint);margin-top:6px;}
.form-success{
  display:none;background:var(--paper-alt);border:1px solid var(--sage-deep);border-radius:var(--radius-s);
  padding:16px 18px;font-size:14px;margin-top:16px;
}
.form-success.is-visible{display:block;}
.form-error{
  display:none;background:#fdf2f2;border:1px solid #c94a4a;border-radius:var(--radius-s);
  padding:16px 18px;font-size:14px;margin-top:16px;color:#8a2a2a;
}
.form-error.is-visible{display:block;}
@media (max-width:900px){.contact-grid{grid-template-columns:1fr;}}
@media (max-width:560px){.form-row{grid-template-columns:1fr;}}

.map-frame{
  border:1px solid var(--border);border-radius:var(--radius-m);overflow:hidden;min-height:260px;
  background:var(--paper-deep) url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40"><path d="M0 40 L40 0" stroke="%23d9d2be" stroke-width="1"/></svg>');
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;
  color:var(--ink-soft);font-size:14px;text-align:center;padding:24px;
}
.map-frame span{font-family:var(--font-mono);font-size:12px;color:var(--ink-faint);line-height:1.6;}
.map-frame .btn{background:var(--white);}

/* ========== 20. Blog ========== */
.blog-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;}
.post-card{
  background:var(--white);border:1px solid var(--border);border-radius:var(--radius-m);
  overflow:hidden;display:flex;flex-direction:column;
  transition:box-shadow .25s ease,transform .25s ease;
}
.post-card:hover{box-shadow:var(--shadow-card);transform:translateY(-4px);}
.post-thumb{aspect-ratio:16/10;background:linear-gradient(135deg,var(--sage) 0%,var(--paper-alt) 100%);display:flex;align-items:center;justify-content:center;}
.post-thumb span{font-family:var(--font-mono);font-size:11px;color:var(--sage-ink);letter-spacing:.06em;}
.post-body{padding:24px;display:flex;flex-direction:column;gap:10px;flex:1;}
.post-cat{font-family:var(--font-mono);font-size:11px;color:var(--sage-deep);text-transform:uppercase;letter-spacing:.05em;}
.post-body h3{font-size:17px;margin:0;}
.post-body p{font-size:13.5px;color:var(--ink-soft);margin:0;flex:1;}
.post-meta{font-family:var(--font-mono);font-size:11.5px;color:var(--ink-faint);margin-top:auto;padding-top:10px;border-top:1px solid var(--border);}
@media (max-width:960px){.blog-grid{grid-template-columns:repeat(2,1fr);}}
@media (max-width:640px){.blog-grid{grid-template-columns:1fr;}}

/* ========== 10b. Product gallery (ảnh sản phẩm theo từng brand đối tác) ========== */
.product-gallery{
  display:grid;grid-template-columns:repeat(5,1fr);gap:14px;margin:18px 0 28px;
}
.product-card{
  background:var(--white);border:1px solid var(--border);border-radius:var(--radius-s);
  overflow:hidden;transition:box-shadow .25s ease,transform .25s ease;
}
.product-card:hover{box-shadow:var(--shadow-card);transform:translateY(-3px);}
.product-card .thumb{aspect-ratio:1;overflow:hidden;background:var(--paper-alt);}
.product-card .thumb img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease;}
.product-card:hover .thumb img{transform:scale(1.06);}
.product-card .pname{
  display:block;padding:10px 12px 12px;font-size:12.5px;color:var(--ink-soft);line-height:1.4;
}
@media (max-width:900px){.product-gallery{grid-template-columns:repeat(3,1fr);}}
@media (max-width:560px){.product-gallery{grid-template-columns:repeat(2,1fr);}}

/* variant "sheet": ảnh nguyên trang thiết kế (không crop vuông) — dùng khi nguồn là trang catalog đầy đủ */
.product-gallery.sheet .thumb{aspect-ratio:3/4;background:var(--white);}
.product-gallery.sheet .thumb img{object-fit:contain;}

/* variant "crop-tight": phóng to & cắt bớt nền trắng/margin quanh sản phẩm trong ảnh trang catalog gốc
   — object-position định vị đúng vùng sản phẩm trước, transform:scale zoom thêm từ tâm vùng đó */
.product-gallery.crop-tight .thumb{aspect-ratio:1;background:var(--paper-alt);}
.product-gallery.crop-tight .thumb img{object-fit:cover;transform:scale(1.0);transform-origin:50% 50%;}

/* .product-card.wide: khung ngang 16:9 cho từng thẻ riêng lẻ — dùng cho ảnh tổng hợp nhiều sản phẩm xếp hàng
   (ảnh 1 sản phẩm + khối chữ mô tả thì giữ khung vuông mặc định để không lộ chữ) */
.product-card.wide .thumb{aspect-ratio:16/9;}

/* gallery 전체를 16:9로 — 공장 갤러리(Hanmi/David)와 CHALLANS de PARIS에 사용 */
.product-gallery.wide169 .thumb{aspect-ratio:16/9;}

/* ========== 20b. Brand mosaic & route panel (thay ảnh phòng lặp lại ở services.html) ========== */
.brand-mosaic{
  display:grid;grid-template-columns:repeat(3,1fr);gap:1px;
  background:var(--border);
}
.brand-mosaic div{
  background:var(--white);padding:18px 12px;aspect-ratio:1;
  display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:5px;
}
.brand-mosaic .name{font-family:var(--font-display);font-weight:700;font-size:13.5px;}
.brand-mosaic .tag{font-family:var(--font-mono);font-size:9px;color:var(--ink-faint);letter-spacing:.03em;}

.route-panel{background:var(--paper-alt);padding:36px;}
.route-panel svg{width:100%;height:auto;}

/* ========== 20c. Connections grid + closing statement (about.html) ========== */
.connect-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;}
.connect-card{
  background:var(--white);border:1px solid var(--border);border-radius:var(--radius-m);
  padding:32px 28px;transition:box-shadow .25s ease,transform .25s ease;
}
.connect-card:hover{box-shadow:var(--shadow-card);transform:translateY(-3px);}
.connect-card .check-ico{
  display:inline-flex;align-items:center;justify-content:center;
  width:34px;height:34px;border-radius:50%;background:var(--sage);color:var(--sage-ink);
  font-weight:700;margin-bottom:18px;
}
.connect-card h4{font-size:16.5px;margin-bottom:8px;}
.connect-card p{font-size:13.5px;color:var(--ink-soft);margin:0;}
@media (max-width:900px){.connect-grid{grid-template-columns:1fr;}}

.story-closing{max-width:680px;margin:0 auto;text-align:center;}
.story-closing p{
  font-family:var(--font-display);font-style:italic;font-size:22px;line-height:1.75;
  color:var(--white);margin:18px 0 0;
}
@media (max-width:640px){.story-closing p{font-size:18px;}}

/* ========== 21. Misc utils ========== */
.mt-0{margin-top:0;}
.text-center{text-align:center;}
.stack{display:flex;flex-direction:column;gap:12px;}
hr.hair{border:none;border-top:1px solid var(--border);margin:48px 0;}