/* ==== master: polish ==== */
/* KKN visual consistency pass — September 2026 */
/* One heading system across the home and inner pages. */
.section-heading h2 { color: var(--ink); font-weight: 700; letter-spacing: -.025em; line-height: 1.25; }
.section-heading p { color: var(--muted); line-height: 1.7; }
/* One card language for categories, products and portfolio throughout the site. */
/* All four process cards stay green; only the connector line moves. */
@keyframes kkn-process-line {
  from { background-position: 100% 0; }
  to { background-position: -120% 0; }
}
/* Replacement press photo: fill the frame cleanly without stretching. */
/* Combined copyright and design credit. */
/* One visual scale for every internal-page hero, based on wrap.php. */
/* Reviews marquee — real customer chat screenshots, scrolling continuously */
.reviews-marquee { position: relative; overflow: hidden; padding: 6px 0 14px; -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.reviews-track { display: flex; width: max-content; gap: 20px; animation: reviews-scroll 52s linear infinite; }
.reviews-marquee:hover .reviews-track,
.reviews-marquee:focus-within .reviews-track { animation-play-state: paused; }
.review-shot { display: block; flex: 0 0 auto; overflow: hidden; background: #fff; border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 10px 26px rgba(0, 80, 60, .1); transition: transform .25s ease, box-shadow .25s ease; }
.review-shot:hover { box-shadow: 0 16px 34px rgba(0, 80, 60, .16); transform: translateY(-3px); }
.review-shot img { display: block; width: auto; height: 300px; }
@keyframes reviews-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
@media (max-width: 700px) {
    .review-shot img { height: 220px; }
    .reviews-track { animation-duration: 34s; }
}
@media (prefers-reduced-motion: reduce) {
    .reviews-track { animation: none; }
}
/* Full-image grid on the dedicated reviews page (reviews.php) */
/* ==== master: site ==== */
/* ==========================================================================
   กรกนกการพิมพ์ — site.css v2
   โหลดหลัง style.css / revision.css / pages.css / polish.css เสมอ
   ส่วนประกอบใหม่ใช้ prefix: kk-  hx-  ph-  เพื่อไม่ชนกับ CSS เดิม
   ========================================================================== */
.ico { width: 1.15em; height: 1.15em; flex: none; }
[hidden] { display: none !important; }
/* ---------- Topbar ---------- */
.kk-topbar { position: relative; z-index: 1002; color: #fff; background: var(--green-950); font-size: 13px; font-weight: 300; }
.kk-topbar-inner { display: flex; height: var(--tb-h); align-items: center; justify-content: space-between; gap: 16px; }
.tb-address { display: flex; min-width: 0; margin: 0; flex: 1 1 auto; align-items: center; gap: 8px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.tb-address .ico { width: 14px; height: 14px; flex: none; color: #fff; }
.kk-tb-group { display: flex; margin: 0; padding: 0; flex: none; align-items: center; list-style: none; }
.kk-tb-group li { display: flex; min-width: 0; align-items: center; }
.kk-tb-group li + li { margin-left: 20px; padding-left: 20px; border-left: 1px solid rgba(255, 255, 255, .16); }
.tb-link { display: inline-flex; height: var(--tb-h); align-items: center; gap: 8px; color: #fff; font-weight: 300; white-space: nowrap; transition: color .15s ease; }
.tb-link .ico { width: 15px; height: 15px; flex: none; color: #fff; }
.tb-link:hover { color: var(--line-strong); }
.tb-link:focus-visible { outline: 2px solid var(--amber); outline-offset: -2px; border-radius: 4px; }
/* ---------- Header ---------- */
.site-header { border-bottom-color: rgba(0, 82, 65, .08); }
.header-inner { min-height: var(--hd-h); grid-template-columns: 150px minmax(0, 1fr) auto; }
.primary-nav { height: var(--hd-h); gap: 22px; }
.primary-nav a { font-size: 14px; transition: color .15s ease; }
.primary-nav a:hover { color: var(--green-700); }
.primary-nav a.active { color: var(--green-700); font-weight: 600; }
.primary-nav a::after { border-radius: 3px 3px 0 0; }
.header-actions { gap: 10px; }
.cart-button { width: 44px; height: 44px; border: 1px solid var(--line); background: #fff; border-radius: 14px; }
.cart-button:hover { border-color: var(--green-600); background: var(--green-50); }
.cart-button span { top: -7px; right: -7px; min-width: 19px; height: 19px; padding: 0 5px; line-height: 15px; font-size: 12px; font-weight: 600; }
.cart-button.has-items { color: #fff; background: var(--green-700); border-color: var(--green-700); }
.cart-button.has-items span { color: var(--green-950); background: var(--amber); }
.header-quote { display: inline-flex; min-height: 44px; margin-left: 0; padding: 0 20px; align-items: center; gap: 8px; border-radius: 14px; box-shadow: 0 8px 18px rgba(0, 139, 87, .24); font-size: 14px; font-weight: 600; white-space: nowrap; }
.header-quote .ico { width: 16px; height: 16px; transition: transform .2s ease; }
.header-quote:hover .ico { transform: translateX(3px); }
@media (max-width: 1240px) {
    .primary-nav { gap: 16px; }
    .primary-nav a { font-size: 13px; }
}
@media (max-width: 1120px) {
    .primary-nav { gap: 13px; }
    .primary-nav a { font-size: 12px; }
}
@media (max-width: 1000px) {
    .header-quote { display: none; }
}
/* ---------- ปุ่มกลาง ---------- */
.kk-btn { display: inline-flex; min-height: 46px; align-items: center; justify-content: center; gap: 9px; padding: 10px 22px; border: 1px solid transparent; border-radius: 14px; font-weight: 600; font-size: 15px; cursor: pointer; transition: transform .18s ease, box-shadow .18s ease, background .18s ease; }
.kk-btn:hover { transform: translateY(-3px); }
.kk-btn-primary { color: #fff; background: var(--green-700); box-shadow: 0 8px 20px rgba(0, 139, 87, .28); }
.kk-btn-primary:hover { background: var(--green-800); box-shadow: 0 12px 26px rgba(0, 139, 87, .34); }
.kk-btn-ghost { color: var(--green-800); background: #fff; border-color: var(--green-600); }
.kk-btn-ghost:hover { background: var(--green-50); }
.kk-btn-line { color: #fff; background: var(--line-brand); }
.kk-btn-line:hover { background: #05b34c; }
.kk-btn-sm { min-height: 40px; padding: 7px 16px; font-size: 14px; border-radius: 10px; }
.kk-btn-block { width: 100%; }
.kk-btn:focus-visible,
.ph-cta:focus-visible,
.kk-cta-btn:focus-visible { outline: 3px solid var(--amber); outline-offset: 2px; }
.kk-tag { display: inline-flex; align-items: center; gap: 5px; padding: 3px 11px; color: var(--amber-900); background: var(--amber-100); border-radius: 999px; font-size: 12px; font-weight: 600; line-height: 1.5; }
.kk-tag .ico { width: 12px; height: 12px; }
/* ==========================================================================
   Hero มาตรฐานของหน้าภายใน (.ph)
   ล็อกความสูงและตำแหน่งของทุกองค์ประกอบ ทุกหน้าจึงเท่ากันเป๊ะ (ข้อความยาวเกินจะถูกตัดด้วย ... แทนการดันเลย์เอาต์)
   ปรับขนาดที่ตัวแปร --ph-h (ความสูง) และ --ph-lead (จำนวนบรรทัดของคำอธิบาย) ที่เดียว
   ========================================================================== */
.ph { --ph-h: 610px; --ph-lead: 3; position: relative; overflow: hidden; isolation: isolate; background: linear-gradient(115deg, var(--green-50) 0%, var(--green-100) 58%, var(--green-100) 100%); border-bottom: 1px solid var(--line); }
.ph::before { position: absolute; z-index: -1; top: -220px; right: -160px; width: 640px; height: 640px; content: ""; background: radial-gradient(circle, rgba(255, 255, 255, .95) 0%, rgba(255, 255, 255, 0) 68%); pointer-events: none; }
.ph-grid { position: relative; display: grid; height: var(--ph-h); padding: 36px 0; align-items: center; grid-template-columns: minmax(0, 1.04fr) minmax(0, .96fr); gap: 48px; }
.ph-copy { display: flex; height: 100%; min-width: 0; flex-direction: column; justify-content: center; }
.ph-copy > * { flex: none; }
.ph-crumbs { display: flex; height: 22px; margin-bottom: 12px; flex-wrap: nowrap; align-items: center; gap: 8px; overflow: hidden; color: var(--muted); font-size: 13px; white-space: nowrap; }
.ph-crumbs > * { flex: none; }
.ph-crumbs a:hover { color: var(--green-700); }
.ph-crumbs [aria-current] { min-width: 0; flex: 0 1 auto; overflow: hidden; color: var(--ink); font-weight: 500; text-overflow: ellipsis; }
.ph-eyebrow { display: block; height: 24px; margin-bottom: 8px; overflow: hidden; color: var(--green-700); font-size: 14px; font-weight: 700; line-height: 24px; text-overflow: ellipsis; white-space: nowrap; }
.ph-eyebrow::before { display: inline-block; width: 22px; height: 3px; margin-right: 9px; content: ""; vertical-align: middle; background: var(--green-600); border-radius: 3px; }
.ph h1 { height: calc(2 * 1.3em); margin: 0 0 12px; overflow: hidden; color: var(--green-950); font-size: clamp(30px, 3.3vw, 44px); font-weight: 700; line-height: 1.3; letter-spacing: -.02em; }
.ph h1 strong { display: block; color: var(--green-700); font-weight: 700; }
.ph-lead { display: -webkit-box; height: calc(var(--ph-lead) * 1.7em); max-width: 560px; margin: 0 0 16px; overflow: hidden; color: var(--text); font-size: 15px; line-height: 1.7; -webkit-box-orient: vertical; -webkit-line-clamp: var(--ph-lead); }
.ph-chips { display: flex; height: 52px; margin-bottom: 18px; flex-wrap: nowrap; gap: 10px; }
.ph-chip { display: flex; min-width: 0; padding: 0 16px 0 9px; flex: 0 1 auto; align-items: center; gap: 10px; background: #fff; border: 1px solid var(--line); border-radius: 14px; }
.ph-chip i { display: grid; width: 32px; height: 32px; flex: none; place-items: center; color: var(--green-700); background: var(--green-100); border-radius: 10px; font-size: 16px; }
.ph-chip > span { min-width: 0; }
.ph-chip small,
.ph-chip b { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ph-chip small { color: var(--muted); font-size: 12px; line-height: 1.25; }
.ph-chip b { color: var(--ink); font-size: 14px; font-weight: 600; line-height: 1.3; }
.ph-actions { display: flex; height: 50px; margin-bottom: 22px; flex-wrap: nowrap; gap: 12px; }
.ph-cta { display: inline-flex; min-width: 0; height: 50px; padding: 0 24px; align-items: center; justify-content: center; gap: 10px; color: #fff; background: var(--green-700); border: 1px solid var(--green-700); border-radius: 14px; box-shadow: 0 10px 24px rgba(0, 139, 87, .28); font-size: 15px; font-weight: 600; white-space: nowrap; transition: transform .18s ease, background .18s ease; }
.ph-cta:hover { background: var(--green-800); transform: translateY(-3px); }
.ph-cta .ico { flex: none; }
.ph-cta-t { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.ph-cta-ghost { flex: none; color: var(--green-800); background: #fff; border-color: var(--green-600); box-shadow: none; }
.ph-cta-ghost:hover { background: #fff; }
.ph-benefits { display: flex; height: 96px; margin: 0; padding: 16px 0 0; align-items: flex-start; gap: 36px; overflow: hidden; list-style: none; border-top: 1px solid var(--line); }
.ph-benefits li:nth-child(3) { display: none; }
.ph-benefits li { display: flex; padding: 0 16px; align-items: flex-start; gap: 10px; border-left: 1px solid var(--line); }
.ph-benefits li:first-child { padding-left: 0; border-left: 0; }
.ph-benefits li:last-child { padding-right: 0; }
.ph-benefits .ico { width: 24px; height: 24px; margin-top: 2px; flex: none; color: var(--green-700); }
.ph-benefits b { display: block; color: var(--ink); font-size: 14px; font-weight: 600; line-height: 1.35; }
.ph-benefits small { display: block; margin-top: 2px; color: var(--muted); font-size: 12px; line-height: 1.45; }
.ph-visual { position: relative; height: 460px; overflow: hidden; background: #fff; border: 1px solid var(--line); border-radius: 30px; box-shadow: 0 28px 56px rgba(0, 82, 65, .16), 0 0 0 1px rgba(0, 82, 65, .07); }
.ph-visual > img { width: 100%; height: 100%; border-radius: 22px; object-fit: cover; }
.ph-visual.is-contain > img { padding: 14px; object-fit: contain; }
.ph-visual > svg { width: 100%; height: 100%; }
.ph-badge { position: absolute; right: 14px; bottom: 14px; display: grid; min-width: 118px; padding: 10px 16px; color: #fff; background: var(--green-800); border: 2px solid #fff; border-radius: 14px; box-shadow: 0 8px 22px rgba(0, 60, 46, .28); text-align: center; line-height: 1.25; }
.ph-badge small,
.ph-badge span { font-size: 12px; opacity: .9; }
.ph-badge strong { color: #fff; font-size: 30px; font-weight: 700; line-height: 1.1; }
/* Hero แบบรูปเต็มพื้นหลัง — รูปชิดขวา ไล่โทนจางไปทางซ้าย (ใช้เมื่อกำหนด 'fit' => 'bleed') */
/* Hero แบบ Boxed + พื้นหลัง Full Width: รูปพื้นหลังเต็มความกว้างจอ (ซ้ายจรดขวา) เนื้อหาอยู่ในกรอบ .container ความกว้างเท่าเว็บ */
.ph-visual.is-bleed { position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 100%; max-width: none; height: auto; overflow: hidden; background: none; border: 0; border-radius: 0; box-shadow: none; pointer-events: none; }
.ph-visual.is-bleed picture { display: block; width: 100%; height: 100%; }
.ph-visual.is-bleed img { display: block; width: 100%; height: 100%; border-radius: 0; object-fit: cover; object-position: right center; }
.ph-side { position: absolute; z-index: 2; right: 0; bottom: 36px; }
.ph-side .ph-badge { position: static; }
/* Hero แบบ Boxed: ทั้ง Hero อยู่ในกรอบกว้างเท่าเว็บ (.container) มุมเหลี่ยม ไม่เว้นระยะบน-ล่าง มีแถบสีพื้นหลังเต็มความกว้างจอด้านซ้าย-ขวา — ตั้งที่ SITE_HERO_LAYOUT (inc/config.php) */
.ph-boxed { padding: 0; overflow: visible; background: var(--green-100); border-bottom: 0; }
.ph-boxed::before { display: none; }
.ph-box { position: relative; overflow: hidden; isolation: isolate; background: linear-gradient(115deg, var(--green-50) 0%, var(--green-100) 58%, var(--green-100) 100%); border: 0; border-radius: 0; }
.ph-boxed .ph-grid { padding: 36px 52px; }
@media (max-width: 980px) {

    .ph-boxed .ph-grid { padding: 28px 24px 32px; }
}
@media (max-width: 560px) {

    .ph-boxed .ph-grid { padding: 22px 18px 26px; }
}
/* ==========================================================================
   Hero หน้าแรก (.hx) — เต็มหน้าจอพอดี เห็นสินค้าทันทีที่เปิดเว็บ
   ========================================================================== */
/* ==========================================================================
   หัวข้อ section และโครงทั่วไป
   ========================================================================== */
.kk-sec { padding: 56px 0; }
.kk-sec.alt { background: var(--green-50); }
.kk-sec.tight { padding: 44px 0; }
.kk-head { display: flex; margin-bottom: 26px; align-items: flex-end; justify-content: space-between; gap: 24px; }
.kk-head h2 { margin: 0 0 5px; font-size: clamp(24px, 2.5vw, 33px); font-weight: 700; letter-spacing: -.015em; }
.kk-head p { max-width: 640px; margin: 0; color: var(--muted); }
.kk-more { display: inline-flex; flex: none; align-items: center; gap: 7px; color: var(--green-700); font-weight: 600; white-space: nowrap; }
.kk-more:hover { color: var(--green-900); }
.kk-head.center { flex-direction: column; align-items: center; text-align: center; }
/* สินค้าหลัก 3 หมวด */
.kk-cats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.kk-cat { display: flex; overflow: hidden; flex-direction: column; background: #fff; border: 1px solid var(--line); border-radius: 22px; transition: transform .2s ease, box-shadow .2s ease; }
.kk-cat:hover { box-shadow: var(--kk-shadow); transform: translateY(-3px); }
.kk-cat-media { position: relative; display: flex; height: 200px; overflow: hidden; background: #fff; }
.kk-cat-media > img { width: 100%; height: 100%; object-fit: cover; object-position: center top; }
.kk-cat-media > svg { width: 100%; height: 100%; }
.kk-cat-media .kk-tag { position: absolute; top: 14px; left: 14px; z-index: 1; }
.kk-cat-body { display: flex; padding: 20px 22px 22px; flex: 1; flex-direction: column; }
.kk-cat-body h3 { margin: 0 0 6px; font-size: 21px; font-weight: 700; }
.kk-cat-body > p { margin: 0 0 14px; color: var(--text); font-size: 14px; line-height: 1.65; }
.kk-cat-specs { display: grid; margin: 0 0 16px; padding: 0; gap: 7px; list-style: none; }
.kk-cat-specs li { display: flex; align-items: flex-start; gap: 9px; font-size: 14px; line-height: 1.5; }
.kk-cat-specs .ico { width: 16px; height: 16px; margin-top: 4px; color: var(--green-600); }
.kk-cat-foot { display: flex; margin-top: auto; padding-top: 16px; align-items: center; justify-content: space-between; gap: 12px; border-top: 1px dashed var(--line); }
.kk-price small { display: block; color: var(--muted); font-size: 12px; line-height: 1.3; }
.kk-price b { color: var(--green-800); font-size: 18px; font-weight: 700; line-height: 1.3; }
/* ไทล์สิ่งพิมพ์อื่นๆ */
/* โปรโมชั่น (ใช้ CSS เดิม) — ปรับระยะให้กระชับ */
/* ขั้นตอนสั่งผลิต 4 ขั้นตอน */
.kk-steps { position: relative; display: grid; margin: 0; padding: 0; grid-template-columns: repeat(4, minmax(0, 1fr)); overflow: hidden; list-style: none; background: #fff; border: 1px solid var(--line); border-radius: 22px; box-shadow: var(--kk-shadow); }
.kk-step { position: relative; padding: 26px 24px 24px; border-left: 1px solid var(--line); }
.kk-step:first-child { border-left: 0; }
.kk-step-top { display: flex; margin-bottom: 18px; align-items: center; gap: 12px; }
.kk-step-no { display: grid; width: 42px; height: 42px; flex: none; place-items: center; color: #fff; background: var(--green-700); border-radius: 50%; font-size: 18px; font-weight: 700; box-shadow: 0 0 0 6px var(--green-100); }
.kk-step-rail { height: 0; flex: 1; border-top: 1px dashed var(--green-300); }
.kk-step:last-child .kk-step-rail { display: none; }
.kk-step-ico { display: grid; width: 46px; height: 46px; margin-left: auto; place-items: center; color: var(--green-700); background: var(--green-50); border-radius: 14px; font-size: 24px; }
.kk-step:last-child .kk-step-ico { margin-left: auto; }
.kk-step h3 { margin: 0 0 6px; font-size: 18px; font-weight: 700; }
.kk-step p { margin: 0 0 14px; color: var(--text); font-size: 14px; line-height: 1.65; }
/* ผลงาน */
/* เกี่ยวกับเรา */
.kk-about { display: grid; align-items: center; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: 44px; }
.kk-about h2 { margin: 0 0 12px; font-size: clamp(26px, 2.8vw, 36px); font-weight: 700; line-height: 1.25; }
.kk-about > div > p { margin: 0 0 18px; font-size: 15px; line-height: 1.8; }
.kk-about-list { display: grid; margin: 0 0 22px; padding: 0; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; list-style: none; }
.kk-about-list li { display: flex; padding: 13px 14px; align-items: flex-start; gap: 11px; background: #fff; border: 1px solid var(--line); border-radius: 14px; }
.kk-about-list i { display: grid; width: 36px; height: 36px; flex: none; place-items: center; color: var(--green-700); background: var(--green-100); border-radius: 10px; font-size: 18px; }
.kk-about-list b { display: block; color: var(--ink); font-size: 14px; line-height: 1.35; }
.kk-about-list small { color: var(--muted); font-size: 12px; line-height: 1.45; }
.kk-about-visual { position: relative; overflow: hidden; border-radius: 30px; box-shadow: var(--kk-shadow); }
.kk-about-visual img { width: 100%; height: 100%; min-height: 380px; object-fit: cover; }
.kk-about-badge { position: absolute; left: 18px; bottom: 18px; display: flex; padding: 12px 18px; align-items: center; gap: 12px; color: #fff; background: var(--green-800); border: 2px solid #fff; border-radius: 14px; }
.kk-about-badge strong { font-size: 34px; font-weight: 700; line-height: 1; }
.kk-about-badge span { font-size: 13px; line-height: 1.35; }
/* ลูกค้า / รีวิว (ปรับหัวข้อ ใช้ CSS เดิมของโลโก้และแถบรีวิว) */
.section.clients,
.section.reviews { padding: 48px 0; }
/* ==========================================================================
   แถบ CTA เหนือ footer
   ========================================================================== */
.kk-footer-cta { position: relative; color: #fff; background: linear-gradient(100deg, var(--green-800) 0%, var(--green-700) 100%); }
.kk-cta-inner { position: relative; display: flex; padding: 34px 0; align-items: center; justify-content: space-between; gap: 28px; }
.kk-footer-cta h2 { margin: 0 0 6px; color: #fff; font-size: clamp(22px, 2.3vw, 30px); font-weight: 700; }
.kk-footer-cta p { max-width: 640px; margin: 0; color: rgba(255, 255, 255, .88); font-size: 14px; line-height: 1.7; }
.kk-cta-actions { display: flex; flex: none; flex-wrap: wrap; gap: 12px; }
.kk-cta-btn { display: inline-flex; min-height: 48px; padding: 10px 22px; align-items: center; gap: 9px; border-radius: 14px; font-weight: 600; transition: transform .18s ease; }
.kk-cta-btn:hover { transform: translateY(-3px); }
.kk-cta-btn-white { color: var(--green-900); background: #fff; }
.kk-cta-btn-line { color: #fff; background: var(--line-brand); }
.kk-footer-cta .kk-cta-inner { flex-wrap: wrap; }
.kk-footer-cta .kk-cta-copy { flex: 1 1 300px; }
.kk-cta-media { display: flex; flex: none; align-items: flex-end; justify-content: center; align-self: flex-end; }
.kk-cta-media img { display: block; width: clamp(170px, 17vw, 250px); height: auto; margin-top: -30px; }
.kk-cta-checklist { display: flex; flex: none; flex-direction: column; gap: 10px; margin: 0; padding: 0; list-style: none; }
.kk-cta-checklist li { display: flex; align-items: center; gap: 7px; color: #fff; font-size: 14px; font-weight: 600; white-space: nowrap; }
.kk-cta-checklist .ico { width: 17px; height: 17px; flex: none; color: #fff; }
.kk-footer-cta .kk-cta-actions { flex: none; flex-direction: column; align-items: stretch; gap: 10px; }
.kk-footer-cta .kk-cta-btn-white { justify-content: center; padding: 12px 26px; font-weight: 700; }
.kk-footer-cta .kk-cta-btn-line { justify-content: center; background: rgba(255, 255, 255, .16); }
/* แถบ CTA แบบมีรูปเต็มแถบ (หน้าที่ตั้ง $footerCta เช่น food-print.php): ข้อความซ้าย รูปชิดขวา */
.kk-cta-photo { overflow: hidden; isolation: isolate; background: linear-gradient(90deg, #043f33 0%, #0a6449 42%, #17915f 100%); }
/* รูปชิดขวา เต็มความสูงแถบ กว้าง 92% (cover) ขอบซ้ายไล่จางเข้าพื้นหลังสี ขอบบน/ล่างคมเต็ม ไม่จาง */
.kk-cta-bg { position: absolute; z-index: -1; top: 0; right: 0; width: 92%; height: 100%; object-fit: cover; object-position: right center; -webkit-mask-image: linear-gradient(90deg, transparent 22%, #000 48%); mask-image: linear-gradient(90deg, transparent 22%, #000 48%); }
.kk-cta-photo .kk-cta-inner { min-height: 260px; padding: 28px 0; }
.kk-cta-photo .kk-cta-copy { flex: 0 1 640px; }
.kk-cta-photo h2 { margin: 0 0 12px; font-size: clamp(24px, 2.7vw, 36px); line-height: 1.35; }
.kk-cta-photo p { max-width: 520px; }
.kk-cta-photo .kk-cta-actions { flex-direction: row; align-items: center; margin-top: 20px; }
.kk-cta-photo .kk-cta-btn { justify-content: center; }
.kk-cta-btn-ghost { color: #fff; background: transparent; border: 1.5px solid rgba(255, 255, 255, .85); }
.kk-cta-btn-ghost:hover { background: rgba(255, 255, 255, .14); }
@media (max-width: 760px) {
    /* มือถือ: ไม่แสดงรูป ใช้พื้นเขียวเหมือนแถบมาตรฐาน (รูปชิดขวาจะทับข้อความ) */
    .kk-cta-bg { display: none; }
    .kk-cta-photo { background: linear-gradient(100deg, var(--green-800) 0%, var(--green-700) 100%); }
    .kk-cta-photo .kk-cta-inner { min-height: 0; padding: 34px 0; }
    .kk-cta-photo .kk-cta-copy { width: 100%; }
    .kk-cta-photo .kk-cta-actions { flex-direction: column; align-items: stretch; margin-top: 20px; }
}
/* ==========================================================================
   Footer — พื้นเขียวเข้ม โลโก้สีขาว
   ========================================================================== */
.kk-footer { color: #fff; background: linear-gradient(180deg, var(--green-950) 0%, var(--green-950) 100%); font-size: 14px; font-weight: 300; }
.kk-footer a:hover { color: #fff; text-decoration: underline; }
.kk-footer-grid { display: grid; padding: 54px 0 46px; grid-template-columns: 1.2fr 1.15fr .9fr 1.2fr; gap: 0 48px; }
.kk-fcol { min-width: 0; }
.kk-fcol h2 { display: flex; margin: 0 0 18px; padding-bottom: 12px; align-items: center; gap: 9px; color: #fff; border-bottom: 1px solid rgba(255, 255, 255, .13); font-size: 16px; font-weight: 500; }
.kk-fcol h2 .ico { width: 18px; height: 18px; color: #fff; }
.kk-flogo { display: inline-block; margin-bottom: 10px; }
.kk-flogo img { width: 150px; height: auto; filter: brightness(0) invert(1); }
.kk-fname { margin: 0 0 12px; color: #fff; font-weight: 500; }
.kk-fnote { margin: -4px 0 14px; color: #fff; font-size: 13px; line-height: 1.6; }
.kk-flist { display: grid; margin: 0; padding: 0; gap: 10px; list-style: none; }
.kk-flist li { display: flex; align-items: flex-start; gap: 11px; line-height: 1.55; }
.kk-flist i { display: grid; width: 26px; height: 26px; flex: none; place-items: center; color: #fff; background: rgba(255, 255, 255, .09); border-radius: 10px; }
.kk-flist i .ico { width: 14px; height: 14px; }
.kk-flist span { min-width: 0; padding-top: 2px; overflow-wrap: anywhere; }
.kk-flist-lines li { padding-bottom: 10px; border-bottom: 1px solid rgba(255, 255, 255, .1); }
.kk-flist-lines li:last-child { padding-bottom: 0; border-bottom: 0; }
.kk-qr-row { display: flex; flex-wrap: wrap; gap: 12px; }
.kk-qr-row a { display: flex; width: 94px; padding: 7px 7px 8px; flex-direction: column; align-items: center; gap: 5px; color: var(--green-900); background: #fff; border-radius: 14px; font-size: 12px; }
.kk-qr-row a:hover { color: var(--green-900); }
.kk-qr-row img { width: 78px; height: 78px; object-fit: contain; }
.kk-fcol-map iframe { width: 100%; height: 160px; border: 0; border-radius: 14px; filter: saturate(.9); }
.kk-map-link { display: inline-flex; margin-top: 10px; align-items: center; gap: 7px; color: #fff; font-size: 13px; font-weight: 300; }
.kk-footer-bottom { border-top: 1px solid rgba(255, 255, 255, .12); background: rgba(0, 0, 0, .16); }
.kk-footer-bottom-inner { display: flex; padding: 16px 0; align-items: center; justify-content: space-between; gap: 8px 18px; flex-wrap: wrap; color: #fff; font-size: 13px; }
.kk-footer-bottom p { margin: 0; }
.kk-credit a { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.kk-legal { display: flex; margin: 0; padding: 0; flex-wrap: wrap; list-style: none; }
.kk-legal li { padding: 0 14px; border-left: 1px solid rgba(255, 255, 255, .2); }
.kk-legal li:first-child { padding-left: 0; border-left: 0; }
.kk-legal li:last-child { padding-right: 0; }
/* ==========================================================================
   หน้าสินค้าอื่นๆ (others.php / crepe.php)
   ========================================================================== */
.kk-group + .kk-group { margin-top: 44px; }
.kk-group-head { display: flex; margin-bottom: 18px; align-items: center; gap: 14px; }
.kk-group-head i { display: grid; width: 44px; height: 44px; place-items: center; color: #fff; background: var(--green-700); border-radius: 14px; font-size: 21px; }
.kk-group-head h2 { margin: 0; font-size: 24px; font-weight: 700; }
.kk-group-head p { margin: 2px 0 0; color: var(--muted); font-size: 14px; }
.kk-prods { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.kk-prod { display: flex; overflow: hidden; flex-direction: column; background: #fff; border: 1px solid var(--line); border-radius: 22px; transition: transform .2s ease, box-shadow .2s ease; }
.kk-prod:hover { box-shadow: var(--kk-shadow); transform: translateY(-3px); }
.kk-prod-media { position: relative; display: grid; height: 170px; place-items: center; overflow: hidden; background: #fff; }
.kk-prod-media > img { width: 100%; height: 100%; object-fit: cover; }
.kk-prod-media > img.contain { padding: 12px; object-fit: contain; }
.kk-prod-media .big-ico { display: grid; width: 84px; height: 84px; place-items: center; color: var(--green-700); background: var(--green-50); border-radius: 30px; box-shadow: 0 8px 22px rgba(0, 82, 65, .1); font-size: 42px; }
.kk-prod-media .kk-tag { position: absolute; top: 12px; left: 12px; }
.kk-prod-body { display: flex; padding: 18px 20px 20px; flex: 1; flex-direction: column; }
.kk-prod-body h3 { margin: 0 0 5px; font-size: 18px; font-weight: 700; }
.kk-prod-body > p { margin: 0 0 12px; color: var(--text); font-size: 14px; line-height: 1.65; }
.kk-prod-body .kk-cat-specs { margin-bottom: 14px; }
.kk-prod-foot { display: flex; margin-top: auto; padding-top: 14px; align-items: center; justify-content: space-between; gap: 10px; border-top: 1px dashed var(--line); }
.kk-split { display: grid; align-items: start; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 28px; }
.kk-panel { padding: 24px 26px; background: #fff; border: 1px solid var(--line); border-radius: 22px; }
.kk-panel h2,
.kk-panel h3 { margin: 0 0 6px; font-size: 21px; font-weight: 700; }
.kk-panel > p { margin: 0 0 16px; color: var(--muted); font-size: 14px; }
.kk-panel.sticky { position: sticky; top: 100px; }
.kk-facts { display: grid; margin: 0 0 6px; padding: 0; gap: 0; list-style: none; }
.kk-facts li { display: flex; padding: 12px 0; align-items: flex-start; gap: 12px; border-top: 1px solid var(--line); }
.kk-facts li:first-child { border-top: 0; padding-top: 0; }
.kk-facts i { display: grid; width: 38px; height: 38px; flex: none; place-items: center; color: var(--green-700); background: var(--green-100); border-radius: 10px; font-size: 18px; }
.kk-facts b { display: block; color: var(--ink); font-size: 15px; line-height: 1.4; }
.kk-facts span { color: var(--muted); font-size: 13px; line-height: 1.55; }
.kk-cols-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
/* ==========================================================================
   ฟอร์ม
   ========================================================================== */
.kk-form { display: grid; gap: 14px; }
.kk-form .row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.kk-field { display: grid; gap: 6px; }
.kk-field label { color: var(--ink); font-size: 13px; font-weight: 600; }
.kk-field label em { color: var(--danger); font-style: normal; }
.kk-field input,
.kk-field select,
.kk-field textarea { width: 100%; min-height: 46px; padding: 10px 14px; color: var(--ink); background: #fff; border: 1px solid var(--line-strong); border-radius: 14px; font: inherit; font-size: 15px; transition: border-color .15s ease, box-shadow .15s ease; }
.kk-field textarea { min-height: 96px; resize: vertical; line-height: 1.6; }
.kk-field input:focus,
.kk-field select:focus,
.kk-field textarea:focus { border-color: var(--green-600); box-shadow: 0 0 0 4px rgba(0, 165, 104, .16); outline: 0; }
.kk-field small { color: var(--muted); font-size: 12px; }
.kk-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.kk-note { display: flex; padding: 12px 14px; align-items: flex-start; gap: 10px; color: var(--green-900); background: var(--green-50); border: 1px solid var(--green-100); border-radius: 14px; font-size: 13px; line-height: 1.6; }
.kk-note .ico { width: 18px; height: 18px; margin-top: 2px; color: var(--green-700); }
.kk-error { display: none; padding: 10px 14px; color: #8a1f14; background: #fdecea; border: 1px solid #f5c2bc; border-radius: 14px; font-size: 14px; }
.kk-error.show { display: block; }
/* ==========================================================================
   ตะกร้าสรุปรายการ (quote.php)
   ========================================================================== */
.kk-basket-layout { display: grid; align-items: start; grid-template-columns: minmax(0, 1.55fr) minmax(320px, 1fr); gap: 24px; }
.kk-basket-head { display: flex; margin-bottom: 14px; align-items: center; justify-content: space-between; gap: 12px; }
.kk-basket-head h2 { margin: 0; font-size: 21px; font-weight: 700; }
.kk-basket-head span { color: var(--muted); font-size: 14px; }
.kk-items { display: grid; gap: 14px; }
.kk-item { padding: 18px 20px; background: #fff; border: 1px solid var(--line); border-radius: 22px; }
.kk-item-top { display: flex; align-items: flex-start; gap: 12px; }
.kk-item-no { display: grid; width: 32px; height: 32px; flex: none; place-items: center; color: #fff; background: var(--green-700); border-radius: 50%; font-size: 14px; font-weight: 700; }
.kk-item h3 { flex: 1; margin: 3px 0 0; font-size: 18px; font-weight: 700; }
.kk-icon-btn { display: grid; width: 36px; height: 36px; flex: none; place-items: center; color: var(--muted); background: #fff; border: 1px solid var(--line); border-radius: 10px; cursor: pointer; transition: color .15s ease, border-color .15s ease; }
.kk-icon-btn:hover { color: var(--danger); border-color: #f0b7b0; }
.kk-spec { display: grid; margin: 12px 0 0; padding: 0; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 22px; list-style: none; }
.kk-spec li { display: flex; padding: 7px 0; justify-content: space-between; gap: 12px; border-bottom: 1px dashed var(--line); font-size: 14px; }
.kk-spec span { color: var(--muted); }
.kk-spec b { color: var(--ink); font-weight: 500; text-align: right; }
.kk-item-foot { display: flex; margin-top: 14px; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.kk-item-foot .kk-field { min-width: 200px; flex: 1; }
.kk-item-foot .kk-field input { min-height: 40px; }
.kk-item-total { text-align: right; }
.kk-item-total small { display: block; color: var(--muted); font-size: 12px; }
.kk-item-total b { color: var(--green-800); font-size: 21px; }
.kk-item-title { min-width: 0; flex: 1; }
.kk-item-title h3 { margin: 3px 0 0; }
.kk-item-desc { margin: 4px 0 0; color: var(--muted); font-size: 13px; line-height: 1.6; }
.kk-item-body { margin-top: 12px; }
.kk-item-body.has-img { display: grid; align-items: start; gap: 22px; grid-template-columns: 150px minmax(0, 1fr); }
.kk-item-body.has-img .kk-spec { margin-top: 0; }
.kk-item-img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 4; object-fit: contain; background: #fff; border: 1px solid var(--line); border-radius: 14px; }
.kk-item-total .kk-item-total-note { margin-top: 2px; }
@media (max-width: 620px) {
    .kk-item-body.has-img { grid-template-columns: 96px minmax(0, 1fr); gap: 14px; }
}
.kk-empty { padding: 40px 26px; text-align: center; background: #fff; border: 1.5px dashed var(--line-strong); border-radius: 22px; }
.kk-empty .big-ico { display: grid; width: 72px; height: 72px; margin: 0 auto 14px; place-items: center; color: var(--green-700); background: var(--green-100); border-radius: 22px; font-size: 34px; }
.kk-empty h3 { margin: 0 0 6px; font-size: 21px; }
.kk-empty p { max-width: 460px; margin: 0 auto 18px; color: var(--muted); }
.kk-empty .links { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.kk-basket-actions { display: flex; margin-top: 14px; flex-wrap: wrap; gap: 10px; }
.kk-sum { display: grid; margin: 0 0 16px; padding: 14px 0 0; gap: 6px; border-top: 1px solid var(--line); font-size: 14px; }
.kk-sum div { display: flex; justify-content: space-between; gap: 12px; }
.kk-sum span { color: var(--muted); }
.kk-send-row { display: grid; gap: 10px; }
.kk-or { position: relative; margin: 2px 0; color: var(--muted); font-size: 12px; text-align: center; }
.kk-or::before,
.kk-or::after { position: absolute; top: 50%; width: calc(50% - 22px); height: 1px; content: ""; background: var(--line); }
.kk-or::before { left: 0; }
.kk-or::after { right: 0; }
.kk-mini-link { display: inline-flex; align-items: center; gap: 6px; color: var(--green-700); background: none; border: 0; font-size: 13px; font-weight: 600; cursor: pointer; }
.kk-mini-link:hover { color: var(--green-900); text-decoration: underline; }
/* กล่องเพิ่มลงตะกร้า (modal) */
.kk-modal { position: fixed; z-index: 3000; inset: 0; display: grid; padding: 18px; place-items: center; overflow-y: auto; background: rgba(4, 40, 31, .55); }
.kk-modal[hidden] { display: none !important; }
.kk-modal-card { position: relative; width: min(580px, 100%); padding: 32px 32px 30px; background: #fff; border-radius: 22px; box-shadow: 0 30px 70px rgba(0, 40, 30, .35); }
.kk-modal-card h2 { margin: 0 0 4px; padding-right: 36px; font-size: 21px; font-weight: 700; }
.kk-modal-card > p { margin: 0 0 20px; color: var(--muted); font-size: 14px; line-height: 1.75; }
.kk-modal-x { position: absolute; top: 14px; right: 14px; }
.kk-modal-actions { display: flex; margin-top: 24px; flex-wrap: wrap; gap: 12px; }
.kk-modal-actions .kk-btn { flex: 1 1 auto; justify-content: center; min-height: 52px; padding: 0 24px; white-space: nowrap; }
@media (max-width: 520px) {
    .kk-modal-actions .kk-btn { flex-basis: 100%; }
}
.kk-added { display: flex; margin-bottom: 18px; align-items: center; gap: 16px; }
.kk-added i { display: grid; width: 46px; height: 46px; flex: none; place-items: center; color: #fff; background: var(--green-700); border-radius: 50%; font-size: 24px; }
/* ผลลัพธ์หลังส่งฟอร์ม */
.kk-result { max-width: 720px; margin: 0 auto; padding: 36px 34px; text-align: center; background: #fff; border: 1px solid var(--line); border-radius: 30px; box-shadow: var(--kk-shadow); }
.kk-result .big-ico { display: grid; width: 76px; height: 76px; margin: 0 auto 16px; place-items: center; color: #fff; background: var(--green-700); border-radius: 50%; font-size: 38px; }
.kk-result.fail .big-ico { background: var(--danger); }
.kk-result h2 { margin: 0 0 8px; font-size: 24px; font-weight: 700; }
.kk-result p { margin: 0 auto 18px; max-width: 520px; color: var(--text); }
.kk-result .links { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.kk-result ol { max-width: 460px; margin: 0 auto 20px; padding-left: 20px; text-align: left; color: var(--text); line-height: 1.8; }
/* ติดต่อเรา */
.kk-channels { display: grid; margin-bottom: 26px; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.kk-channel { display: flex; padding: 18px 18px; flex-direction: column; gap: 4px; color: inherit; background: #fff; border: 1px solid var(--line); border-radius: 22px; transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; }
a.kk-channel:hover { border-color: var(--green-600); box-shadow: var(--kk-shadow); transform: translateY(-3px); }
.kk-channel i { display: grid; width: 44px; height: 44px; margin-bottom: 8px; place-items: center; color: #fff; background: var(--green-700); border-radius: 14px; font-size: 21px; }
.kk-channel.line i { background: var(--line-brand); }
.kk-channel small { color: var(--muted); font-size: 12px; }
.kk-channel b { color: var(--ink); font-size: 16px; font-weight: 600; line-height: 1.4; word-break: break-word; }
.kk-channel span { color: var(--muted); font-size: 13px; line-height: 1.5; }
.kk-map { width: 100%; height: 100%; min-height: 360px; border: 0; border-radius: 22px; }
/* หน้าข้อกำหนด */
.kk-legal-copy { max-width: 820px; margin: 0 auto; padding: 8px 0; }
.kk-legal-copy h2 { margin: 26px 0 8px; padding-top: 22px; font-size: 21px; font-weight: 700; border-top: 1px solid var(--line); }
.kk-legal-copy h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.kk-legal-copy p,
.kk-legal-copy li { font-size: 15px; line-height: 1.85; }
.kk-legal-copy ul { padding-left: 22px; }
.kk-legal-copy a { color: var(--green-700); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
/* ปุ่มสั่งซื้อในเครื่องคำนวณ ให้เป็นไอคอนตะกร้าเดียวกัน */
[data-quote-link],
[data-mobile-quote] { cursor: pointer; }
/* ==========================================================================
   ผลงานหน้าแรก (รูปแบบใหม่: ปกสมุดด้านหน้า พื้นขาว)
   ========================================================================== */
.kk-show { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 16px; }
.kk-show-item { margin: 0; overflow: hidden; background: #fff; border: 1px solid var(--line); border-radius: 22px; transition: transform .2s ease, box-shadow .2s ease; }
.kk-show-item:hover { box-shadow: var(--kk-shadow); transform: translateY(-3px); }
.kk-show-stage { overflow: hidden; background: #fff; }
.kk-show-stage img { width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: contain; mix-blend-mode: multiply; }
.kk-show-item figcaption { display: grid; padding: 12px 16px 14px; gap: 2px; }
.kk-show-item figcaption b { color: var(--ink); font-size: 15px; font-weight: 600; line-height: 1.4; }
.kk-show-item figcaption span { color: var(--muted); font-size: 13px; line-height: 1.45; }
.kk-show.is-solo { align-items: center; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 48px; }
.kk-show.is-solo .kk-show-item { border-radius: 30px; box-shadow: var(--kk-shadow-lg); }
.kk-show.is-solo .kk-show-item:hover { transform: none; }
.kk-show.is-solo figcaption { display: none; }
.kk-show-side { min-width: 0; }
.kk-show-side h3 { margin: 12px 0 8px; font-size: clamp(22px, 2.4vw, 30px); font-weight: 700; line-height: 1.3; }
.kk-show-side > p { max-width: 560px; margin: 0 0 16px; font-size: 15px; line-height: 1.8; }
.kk-show-side .kk-cat-specs { margin-bottom: 22px; }
.kk-show-actions { display: flex; flex-wrap: wrap; gap: 12px; }
/* ==========================================================================
   Responsive — เดสก์ท็อปใหญ่ › แล็ปท็อป › แท็บเล็ต › มือถือ (ถึง 320px)
   ========================================================================== */
@media (min-width: 1700px) {
    :root { --container: 1320px; }
    .ph { --ph-h: 640px; }
    .ph-visual { height: 500px; }
}
@media (max-width: 1199px) {
    .ph { --ph-lead: 4; --ph-h: 640px; }
}
@media (max-width: 1100px) {
    .tb-hide-md { display: none; }
    .kk-topbar-inner { justify-content: center; }
    .kk-cats { grid-template-columns: 1fr; }
    .kk-cat { flex-direction: row; }
    .kk-cat-media { width: 40%; height: auto; min-height: 220px; flex: none; }
    .kk-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .kk-step:nth-child(3) { border-left: 0; }
    .kk-step:nth-child(n + 3) { border-top: 1px solid var(--line); }
    .kk-step:nth-child(2) .kk-step-rail { display: none; }
    .kk-footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 34px 40px; }
    .kk-channels { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .kk-prods { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 980px) {
    .ph { --ph-lead: 3; }
    .ph-grid { height: auto; padding: 30px 0 36px; grid-template-columns: 1fr; gap: 26px; }
    .ph-copy { height: auto; }
    .ph-lead { max-width: none; }
    .ph-visual { height: clamp(240px, 46vw, 400px); }
    .ph-visual.is-bleed { display: none; }
    /* จอเล็กกว่า 980px: ไม่ใช้รูปพื้นหลัง ใช้พื้นสีเดิม */
    .ph-side { right: 20px; bottom: 20px; }
    .kk-split,
    .kk-basket-layout { grid-template-columns: 1fr; }
    .kk-panel.sticky { position: static; }
    .kk-about { grid-template-columns: 1fr; }
    .kk-cta-inner { flex-direction: column; align-items: flex-start; }
    .kk-cta-media { order: -1; align-self: center; }
    .kk-cta-media img { width: clamp(120px, 34vw, 180px); }
    .kk-cta-checklist { flex-direction: row; flex-wrap: wrap; gap: 8px 18px; }
    .kk-footer-cta .kk-cta-actions { flex-direction: row; width: 100%; }
    .kk-show.is-solo { grid-template-columns: 1fr; gap: 26px; }
    .kk-show.is-solo .kk-show-item { max-width: 460px; }
}
@media (max-width: 680px) {
    :root { --tb-h: 40px; --hd-h: 68px; }
    .kk-tb-group li.tb-hide-sm { display: none; }
    .kk-topbar-inner { justify-content: center; }
    .kk-tb-group { width: 100%; justify-content: space-between; }
    .kk-tb-group li + li { margin-left: 0; padding-left: 0; border-left: 0; }
    .ph { --ph-lead: 4; }
    .ph-grid { padding: 24px 0 30px; gap: 22px; }
    .ph h1 { font-size: clamp(22px, 6.6vw, 34px); }
    .ph-lead { font-size: 14px; }
    .ph-chips { height: auto; flex-direction: column; gap: 8px; }
    .ph-chip { height: 52px; }
    .ph-benefits { display: none; }
    .ph-actions { margin-bottom: 0; }
    .ph-cta { padding: 0 18px; font-size: 15px; }
    .ph-cta-t { display: -webkit-box; line-height: 1.25; white-space: normal; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
    .ph-cta:not(.ph-cta-ghost) { flex: 1 1 auto; }
    .ph-visual { height: auto; max-height: 340px; aspect-ratio: 4 / 3; border-radius: 22px; }
    .ph-visual > img { border-radius: 22px; }
    .ph-side { right: 12px; bottom: 12px; }
    .ph-badge { min-width: 96px; padding: 7px 12px; }
    .ph-badge strong { font-size: 24px; }
    .kk-cat { flex-direction: column; }
    .kk-cat-media { width: 100%; min-height: 0; height: 190px; }
    .kk-steps,
    .kk-cols-2,
    .kk-form .row,
    .kk-about-list,
    .kk-spec,
    .kk-channels,
    .kk-prods { grid-template-columns: 1fr; }
    .kk-step { border-left: 0; border-top: 1px solid var(--line); }
    .kk-step:first-child { border-top: 0; }
    .kk-step-rail { display: none; }
    .kk-head { flex-direction: column; align-items: flex-start; gap: 8px; }
    .kk-footer-grid { padding: 40px 0 34px; grid-template-columns: 1fr; gap: 30px; }
    .kk-cta-actions { width: 100%; }
    .kk-cta-btn { flex: 1 1 100%; justify-content: center; }
    .kk-footer-cta .kk-cta-actions { flex-direction: column; }
    .kk-show-actions .kk-btn { flex: 1 1 100%; }
    .kk-sec { padding: 40px 0; }
    .kk-result { padding: 28px 20px; }
}
@media (max-width: 480px) {
    .ph { --ph-lead: 5; }
    .ph-cta-ghost { width: 50px; padding: 0; }
    .ph-cta-ghost .ph-cta-t { display: none; }
    .kk-footer-bottom-inner { flex-direction: column; align-items: flex-start; }
}
@media (prefers-reduced-motion: reduce) {
    .kk-btn,
    .ph-cta,
    .kk-cat,
    .kk-prod,
    .kk-cta-btn,
    .kk-show-item { transition: none; }
}
/* ผลงานบนหน้าแรก: แถวเดียว 6 ชิ้น */
/* แก้สไลด์โปรโมชั่นเดิมที่ล้นกรอบด้านขวา */
/* คำถามที่พบบ่อย */
.kk-faq { display: grid; gap: 10px; }
.kk-faq details { background: #fff; border: 1px solid var(--line); border-radius: 14px; }
.kk-faq summary { display: flex; padding: 15px 18px; align-items: center; justify-content: space-between; gap: 12px; color: var(--ink); font-weight: 600; cursor: pointer; list-style: none; }
.kk-faq summary::-webkit-details-marker { display: none; }
.kk-faq summary::after { width: 22px; height: 22px; flex: none; content: "+"; display: grid; place-items: center; color: var(--green-700); background: var(--green-100); border-radius: 50%; font-size: 16px; line-height: 1; }
.kk-faq details[open] summary::after { content: "–"; }
.kk-faq details[open] { border-color: var(--green-600); }
.kk-faq p { margin: 0; padding: 0 18px 16px; color: var(--text); font-size: 14px; line-height: 1.75; }
.kk-steps.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 1100px) {
    .kk-steps.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .kk-steps.three .kk-step:nth-child(3) { border-left: 1px solid var(--line); }
    .kk-steps.three .kk-step:nth-child(n + 3) { border-top: 0; }
}
@media (max-width: 680px) {
    .kk-steps.three { grid-template-columns: 1fr; }
    .kk-steps.three .kk-step:nth-child(3) { border-left: 0; }
    .kk-steps.three .kk-step { border-top: 1px solid var(--line); }
    .kk-steps.three .kk-step:first-child { border-top: 0; }
}
/* เมนูมือถือ: ซ่อนด้วย visibility แทนการเลื่อนออกนอกจอ (กันหน้าเว็บเลื่อนซ้าย-ขวาได้) */
@media (max-width: 900px) {
    /* Header ใช้ backdrop-filter จึงเป็นกรอบอ้างอิงของ fixed: ให้เมนูวางใต้ Header ด้วย absolute */
    .primary-nav { position: absolute; top: 100%; right: 0; bottom: auto; height: auto; max-height: calc(100vh - 120px); overflow-y: auto; border-radius: 0 0 0 18px; transform: none; visibility: hidden; opacity: 0; pointer-events: none; transition: opacity .2s ease, visibility 0s linear .2s; }
    .primary-nav.open { visibility: visible; opacity: 1; pointer-events: auto; transition: opacity .2s ease; }
    .header-actions .cart-button { display: grid; }
    .header-inner { grid-template-columns: minmax(0, 1fr) auto auto; gap: 10px; }
}
/* ปุ่มขอใบเสนอราคาในเมนูมือถือ (Header ซ่อนปุ่มนี้เมื่อจอแคบ) */
.primary-nav a.nav-cta { display: none; }
@media (max-width: 900px) {
    .primary-nav a.nav-cta { display: flex; margin-top: 18px; min-height: 50px; padding: 0 16px; align-items: center; justify-content: center; color: #fff; background: var(--green-700); border: 0; border-radius: 14px; box-shadow: 0 8px 18px rgba(0, 139, 87, .24); font-size: 15px; font-weight: 600; }
    .primary-nav a.nav-cta::after { display: none; }
    .primary-nav a.nav-cta:hover { color: #fff; background: var(--green-800); }
}
/* จอ <= 620px: container ใช้ขอบ 14px (ตรงกับ style.css) */
@media (max-width: 620px) {

}
/* ==========================================================================
   มาตรฐานหัวข้อทั้งเว็บ (รวมทุกหน้าให้เหมือนกัน)
   สีหัวข้อ: ตั้งเป็น var(--ink) ในไฟล์ CSS แต่ละไฟล์แล้ว (หัวข้อบนพื้นเขียวเข้ม/รูป = ขาว)
   ระดับ 1 หัวข้อส่วน  clamp(24px, 2.5vw, 33px)  ตัวหนา 700
   ระดับ 2 หัวข้อกล่อง/กลุ่ม 21px                 ตัวหนา 700
   ระดับ 3 หัวข้อการ์ด/ขั้นตอน 18px                ตัวหนา 700
   ========================================================================== */
body .kk-head h2,
body .kk-about h2,
body .sb-head h2,
body .section-heading h2,
body .wrap-section-heading h2,
body .bc-ref-section-head h2,
body .fb-section-heading h2 { font-size: clamp(24px, 2.5vw, 33px) !important; font-weight: 700 !important; line-height: 1.25 !important; letter-spacing: -.015em !important; }
body .kk-group-head h2,
body .kk-sec > .container > h2,
body .kk-panel h2,
body .kk-panel h3,
body .kk-basket-head h2,
body .kk-empty h3,
body .kk-legal-copy h2,
body .kk-cat-body h3,
body .bc-ref-summary h3,
body .fb-summary h2 { font-size: 21px !important; font-weight: 700 !important; line-height: 1.3 !important; letter-spacing: 0 !important; }
body .kk-step h3,
body .bc-ref-step-head h3,
body .bc-spec-card-grid h3,
body .fb-step-title h3,
body .fb-info-grid h3,
body .wrap-paper-grid h3,
body .kk-prod-body h3 { font-size: 18px !important; font-weight: 700 !important; line-height: 1.4 !important; letter-spacing: 0 !important; }
/* ซองเครป: กล่องสรุปราคา (crepe.php) */
.cr-sum { margin: 4px 0 16px; padding: 14px 16px; background: var(--green-50); border: 1px solid var(--green-100); border-radius: 14px; }
.cr-sum-row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; color: var(--text); font-size: 14px; }
.cr-sum-row + .cr-sum-row { margin-top: 6px; }
.cr-sum-row.is-total { color: var(--ink); font-size: 16px; }
.cr-sum-row b { font-weight: 700; }
.cr-sum small { display: block; margin-top: 8px; color: var(--muted); font-size: 12.5px; line-height: 1.5; }
.kk-field label small { color: var(--muted); font-weight: 400; }
/* ---------- แถบแจ้งใช้คุกกี้ / PDPA ---------- */
.kk-cookie-bar { position: fixed; z-index: 1200; left: 16px; right: 16px; bottom: 16px; display: flex; max-width: 760px; margin: 0 auto; padding: 16px 18px; align-items: center; gap: 16px; flex-wrap: wrap; color: var(--text); background: #fff; border: 1px solid var(--line); border-radius: 16px; box-shadow: 0 16px 40px rgba(6, 60, 40, .18); }
.kk-cookie-bar p { flex: 1 1 260px; margin: 0; font-size: 13.5px; line-height: 1.6; }
.kk-cookie-bar a { color: var(--green-700); font-weight: 600; text-decoration: underline; }
.kk-cookie-bar button { flex: none; }
@media (max-width: 480px) {
    .kk-cookie-bar { left: 12px; right: 12px; bottom: 12px; padding: 14px; }
    .kk-cookie-bar button { width: 100%; }
}
/* ==========================================================================
   ปุ่มสรุปรายการ/ขอใบเสนอราคา ใช้แบบเดียวกันทุกหน้า (สมุดนักเรียน · กระดาษรองอาหาร · นามบัตร · ใบปลิว · ซองเครป)
   ========================================================================== */
body .kk-cta.kk-cta { display: flex; width: 100%; min-height: 52px; padding: 0 16px; align-items: center; justify-content: center; gap: 9px; color: #fff; background: #007a4d; border: 0; border-radius: 14px; box-shadow: 0 10px 22px rgba(0, 122, 77, .26); font-family: inherit; font-size: 16px; font-weight: 700; line-height: 1.3; text-align: center; text-decoration: none; cursor: pointer; transform: none; transition: background .15s ease, box-shadow .15s ease, transform .15s ease; }
body .kk-cta.kk-cta:hover { color: #fff; background: #005f3b; transform: translateY(-1px); }
body .kk-cta.kk-cta:focus-visible { outline: 3px solid var(--amber); outline-offset: 2px; }
body .kk-cta.kk-cta svg { width: 20px; height: 20px; flex: none; }
body .kk-cta.kk-cta.kk-cta-line { min-height: 46px; margin-top: 9px; color: #067a3a; background: #fff; border: 1.5px solid #bfe6cd; box-shadow: none; font-size: 15px; }
body .kk-cta.kk-cta.kk-cta-line:hover { color: #067a3a; background: #effaf3; border-color: var(--line-brand); transform: none; }
body .sb-note, body .wc-terms { color: #55706b; font-size: 13px; line-height: 1.7; }
/* ==========================================================================
   MASTER — เครื่องเลือกสินค้าและกล่องสรุป (สมุดนักเรียน · กระดาษรองอาหาร · นามบัตร · ใบปลิว)
   ทุกหน้าใช้กฎชุดเดียวกันนี้ อยากปรับหน้าตาของทุกหน้า ให้แก้ที่นี่ที่เดียว
   หน้าใหม่: ใช้ชื่อสไตล์เดิมของหน้านั้นแล้วเพิ่ม selector ของหน้าใหม่ในรายการด้านล่าง
   ไฟล์ของแต่ละหน้า (sb-configurator / wrap-page / business-card / flyer-brochure) เหลือเฉพาะเรื่องโครงและเลย์เอาต์ของหน้านั้น
   ========================================================================== */
/* 1) ตัวเลือกตอนเอาเมาส์ชี้ */
body .sb-card:hover .sb-face,
body .sb-opt:hover .sb-opt-face,
body .sb-opt:hover .sb-qty-face,
body .sb-prodbtn:hover,
body .wc-opt:hover .wc-opt-face,
body .wc-tile:hover span,
body .wc-row:not(.wc-row-head):hover,
body .bc-paper-row:hover,
body .bc-choice-box:hover,
body .bc-qty-options button:hover,
body .fb-choice:hover { background: var(--hover-bg); border-color: var(--hover-line); box-shadow: none; }
/* 2) ตัวเลือกที่กดแล้ว: พื้นเขียวอ่อน เส้นเขียวบาง ไม่มีเงา */
body .sb-card > input:checked + .sb-face,
body .sb-opt > input:checked + .sb-opt-face,
body .sb-opt > input:checked + .sb-qty-face,
body .sb-prodbtn[aria-pressed="true"],
body .sb-opt-face.is-static,
body .wc-opt.is-on .wc-opt-face,
body .wc-tile.is-on span,
body .wc-row.is-on,
body .bc-paper-row.is-selected,
body .bc-choice-box.is-selected,
body .bc-qty-options button.is-selected,
body .fb-choice.is-selected { background: var(--select-bg); border-color: var(--select-line); box-shadow: none; }
/* 3) การ์ดขั้นตอน */
body .bc-ref-card,
body .fb-step,
body .sb-step,
body .wc-step { background: #fff; border: 1px solid var(--line); border-radius: var(--card-radius); box-shadow: var(--card-shadow); }
/* 4) หัวขั้นตอน: เลขในกล่องเขียว + ชื่อ + คำอธิบายบรรทัดเดียว */
body .sb-step-num,
body .wc-num,
body .bc-step-no { width: 36px; height: 36px; flex: none; color: #fff; background: var(--green-700); border: 0; border-radius: 10px; font-size: 16px; font-weight: 800; }
body .bc-ref-step-head h3,
body .sb-step-title b,
body .wc-step-head h3 { margin: 0; color: var(--ink); font-size: 17px; font-weight: 700; line-height: 1.25; }
body .bc-ref-step-head p,
body .wc-step-head p { margin: 3px 0 0; color: var(--muted); font-size: 13px; line-height: 1.5; }
/* 5) กล่องสรุป */
body .bc-ref-summary,
body .fb-summary,
body .sb-summary,
body .wc-summary { background: #fff; border: 1px solid var(--line); border-radius: var(--card-radius); box-shadow: var(--card-shadow); }
body .bc-summary-top,
body .fb-summary-label,
body .sb-sum-top small,
body .wc-sum-top small { color: var(--green-700); font-size: 12px; font-weight: 700; letter-spacing: 0; }
body .bc-ref-summary h3,
body .fb-summary h2,
body .sb-sum-top b,
body .wc-sum-top b { margin: 4px 0 12px; color: var(--ink); font-size: 22px; font-weight: 800; line-height: 1.25; }
body .sb-sum-top,
body .wc-sum-top { padding: 18px 20px 0; color: var(--ink); background: none; }
body .bc-summary-total,
body .fb-total-box,
body .wc-price,
body .sb-price { background: var(--green-50); border: 0; border-radius: 12px; }
body .sb-price { margin: 12px 18px 0; padding: 12px 14px; }
body .bc-summary-total strong,
body .fb-total-box strong,
body .sb-total strong,
body .wc-total strong { color: var(--green-700); font-size: 30px; font-weight: 800; line-height: 1.1; }
body .bc-summary-list dt,
body .fb-summary dt,
body .wc-sum-list dt,
body .sb-row-text small { color: var(--muted); font-size: 13px; }
body .bc-summary-list dd,
body .fb-summary dd,
body .wc-sum-list dd,
body .sb-row-text b { color: var(--ink); font-size: 14px; font-weight: 700; }
/* 6) หัวข้อส่วน: ป้ายเล็กสีเขียว · หัวข้อ · คำอธิบายบรรทัดเดียว */
body .sb-eyebrow,
body .fb-eyebrow,
body .wrap-config-section .wrap-section-heading .eyebrow,
body .bc-ref-section-head > span { display: block; color: var(--green-700); background: none; font-size: 13px; font-weight: 700; letter-spacing: .06em; }
body .sb-head p,
body .fb-section-heading p,
body .wrap-section-heading p,
body .bc-ref-section-head p { color: var(--muted); font-size: 15px; line-height: 1.7; }

/* การ์ดแชทกับทีมงาน LINE (ใต้สรุปรายการทุกหน้า) สัดส่วนตามรูปต้นแบบ ย่อขยายตามความกว้างการ์ด */
.kk-linecard { position: relative; overflow: hidden; container-type: inline-size; background: #fff; border: 1px solid var(--line); border-radius: 18px; box-shadow: 0 8px 22px rgba(0, 82, 65, .07); flex: none; }
.kk-linecard-top { position: relative; aspect-ratio: 2.2 / 1; padding: 26px 0 0 22px; }
.kk-linecard-text { position: relative; z-index: 1; max-width: 50%; }
.kk-linecard-text b { display: block; color: #0d5a3f; font-size: 18px; font-weight: 800; line-height: 1.4; }
.kk-linecard-text span { display: block; margin-top: 12px; color: #8a9893; font-size: 14px; line-height: 1.6; }
.kk-linecard-photo { position: absolute; right: 5%; bottom: -2.5cqw; width: 41%; height: auto; aspect-ratio: 520 / 598; object-fit: cover;  }
.kk-linecard-btn { position: relative; z-index: 1; display: flex; align-items: center; justify-content: center; gap: 9px; min-height: 52px; margin: 0 22px 18px; color: #fff; background: #007a4d; border-radius: 14px; box-shadow: 0 10px 22px rgba(0, 122, 77, .26); font-size: 16px; font-weight: 700; line-height: 1.3; text-decoration: none; transition: filter .15s ease; }
.kk-linecard-btn:hover { color: #fff; background: #005f3b; }
.kk-linecard-btn img { display: block; width: 28px; height: auto; }
@container (min-width: 1px) {
    .kk-linecard-top { padding: 8.5cqw 0 0 7.5cqw; }

    .kk-linecard-text b { font-size: clamp(15px, 5cqw, 19px); }
    .kk-linecard-text span { margin-top: 3.8cqw; font-size: clamp(12px, 4.4cqw, 15px); }
}
.kk-sidecol { position: sticky; top: 100px; min-width: 0; }
.kk-sidecol > aside { position: static; top: auto; }
.kk-sidecol > .kk-linecard { margin-top: 16px; }
/* ปุ่มในการ์ดกว้างเท่าปุ่ม "เพิ่มลงตะกร้าสรุป" ของแต่ละหน้า (ขอบซ้ายขวาเท่ากับกล่องสรุปหน้านั้น) */
.sb-summary ~ .kk-linecard .kk-linecard-btn { margin-left: 20px; margin-right: 20px; }
.wc-summary ~ .kk-linecard .kk-linecard-btn { margin-left: 22px; margin-right: 22px; }
.kk-panel ~ .kk-linecard .kk-linecard-btn { margin-left: 26px; margin-right: 26px; }
/* โลโก้ LINE ทั้งเว็บ (ใช้ไฟล์โลโก้ที่ให้มา สีตามตัวอักษรของปุ่ม) */
span.ico.kk-line-logo { display: inline-block; flex: none; width: 1.45em; height: 1.35em; vertical-align: -.3em; background-color: currentColor; -webkit-mask: url(../images/line-logo-white.png) center / contain no-repeat; mask: url(../images/line-logo-white.png) center / contain no-repeat; }
body .kk-cta.kk-cta .kk-line-logo { width: 26px; height: 24px; }
/* กล่องราคา หน้าสมุดนักเรียน: แยกเป็นบล็อก ป้ายชื่ออยู่บน ตัวเลขชิดขวาอยู่ล่าง */
body .sb-price { padding: 14px 16px 12px; }
body .sb-price-line { display: block; padding-bottom: 12px; border-bottom: 1px dashed var(--line-strong); }
body .sb-price-line span { display: block; color: var(--ink); font-size: 14px; font-weight: 700; line-height: 1.4; }
body .sb-price-line b { display: block; margin-top: 2px; color: var(--ink); font-size: 20px; font-weight: 800; line-height: 1.3; text-align: right; }
body .sb-total { display: block; margin-top: 12px; }
body .sb-total span { display: block; color: var(--ink); font-size: 14px; font-weight: 700; line-height: 1.4; }
body .sb-total strong { display: block; margin-top: 2px; text-align: right; }
body .sb-formula { margin: 4px 0 0; color: var(--muted); font-size: 13px; text-align: right; }

/* ไม่มีเงาที่ปุ่มทั้งเว็บ (ปุ่มทุกแบบ ทุกสถานะ) */
.button, .button:hover, [class*="btn"], [class*="btn"]:hover, .kk-cta, .kk-cta:hover, .header-quote, .header-quote:hover,
.primary-nav a.nav-cta, .ph-cta, .ph-cta:hover, .sb-next, .sb-next:hover, .sb-more, .sb-more:hover { box-shadow: none !important; }
/* ==========================================================================
   Hero แบบเต็มจอ (.ph-home) — ใช้ทุกหน้าที่มีรูป Hero กว้าง (หน้าแรก สมุดนักเรียน กระดาษรองอาหาร ซองเครป ติดต่อเรา งานพิมพ์ร้านอาหาร) รูปพื้นหลังเต็มความกว้างจอ ล็อกจุดเด่นของรูป
   - เนื้อหา (ข้อความ/ปุ่ม/ไอคอน) เป็น HTML อยู่ใน .container ตามเดิม รูปแยกเต็มจอด้านหลัง ไล่สีขาวอมเขียวจางจากซ้ายไปขวาเพื่อให้ข้อความอ่านง่าย
   - ความสูง Hero คุมด้วย --ph-h แยกจากสัดส่วนรูป · รูปครอปแบบ Cover (ไม่ยืด/บีบ)
   - ขนาดเด็กคงที่ตามความสูง Hero จอกว้างขึ้นจะเห็นฉากซ้าย-ขวาเพิ่ม · จอกว้างกว่าที่รูปเปิดได้ (ราว 2300px) ความสูง Hero ยังเท่าเดิม รูปถูกครอปบน-ล่างแทน
   - มือถือ/แท็บเล็ต (≤ 980px) ไม่แสดงรูป (site.css ซ่อนอยู่แล้ว)
   - เด็กอยู่กลางค่อนขวา: จุดกึ่งกลางกลุ่มเด็กอยู่ที่ --hero-at (72%) ของความกว้างจอ ตราบที่รูปยังกว้างพอ (จอกว้างมากรูปจะชิดขวา)
   ปรับได้ที่ตัวแปร: --hero-fy (ตำแหน่งแนวตั้งที่ใช้ครอป 0–1 เมื่อรูปสูงกว่า Hero · 0.5 = กึ่งกลาง ค่าน้อย = โชว์ด้านบนของรูปมากขึ้น) · --hero-fx (ตำแหน่งกลางกลุ่มเด็กแนวนอนในรูป 0–1 · ตั้งอัตโนมัติจาก index.php) · --hero-at (ให้กลางกลุ่มเด็กอยู่ที่กี่ % ของความกว้างจอ)
   ตัวแปร --hero-ar (สัดส่วนกว้าง/สูง) และ --hero-fx ตั้งอัตโนมัติจากไฟล์รูปโดย kk_page_hero() ใน inc/helpers.php
   ========================================================================== */
.ph-home { --hero-ar: 2.78; --hero-fx: .525; --hero-at: .72; --hero-wi: max(calc(var(--ph-h) * var(--hero-ar)), 100vw); }
.ph-home .ph-visual.is-bleed { left: 0; width: 100%; max-width: none; -webkit-mask-image: none; mask-image: none; }
.ph-home .ph-visual.is-bleed picture { position: absolute; inset: 0; display: block; }
.ph-home .ph-visual.is-bleed img { position: absolute; top: calc(var(--hero-fy, .5) * 100%); left: clamp(calc(100vw - var(--hero-wi)), calc(100vw * var(--hero-at) - var(--hero-fx) * var(--hero-wi)), 0px); width: auto; max-width: none; height: max(var(--ph-h), calc(100vw / var(--hero-ar))); aspect-ratio: var(--hero-ar); object-fit: cover; transform: translateY(calc(var(--hero-fy, .5) * -100%)); }
.ph-home .ph-visual.is-bleed::after { position: absolute; inset: 0; content: ""; background: linear-gradient(90deg, rgba(242, 251, 246, .97) 0%, rgba(242, 251, 246, .9) 26%, rgba(242, 251, 246, .55) 40%, rgba(242, 251, 246, 0) 56%); pointer-events: none; }
.ph-home .ph-copy { text-shadow: 0 0 10px rgba(255, 255, 255, .9), 0 1px 18px rgba(255, 255, 255, .8); }
.ph-home .ph-benefits small,
.ph-home .ph-crumbs { color: var(--ink); }
.ph-home .ph-chip,
.ph-home .ph-cta { text-shadow: none; }

/* ---------- เอฟเฟกต์ Hero (ใช้เหมือนกันทุกหน้า): ข้อความเข้าทีละบรรทัด + รูปค่อยๆ ซูมเข้า + ปุ่มหลักมีแสงวิ่งผ่าน ----------
   ย้ายมาจาก home.css (เดิมโหลดเฉพาะหน้าแรก หน้าอื่นเลยไม่มีเอฟเฟกต์) — mv-rise ใช้ใน home.css ด้วย */
@keyframes mv-rise { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }
@keyframes mv-zoom { from { opacity: 0; transform: scale(1.07); } to { opacity: 1; transform: none; } }
@keyframes mv-shine { 0%, 62% { left: -60%; } 100% { left: 140%; } }
.ph-home .ph-copy > * { animation: mv-rise .75s cubic-bezier(.2, .7, .2, 1) backwards; }
.ph-home .ph-copy > :nth-child(1) { animation-delay: .05s; }
.ph-home .ph-copy > :nth-child(2) { animation-delay: .15s; }
.ph-home .ph-copy > :nth-child(3) { animation-delay: .27s; }
.ph-home .ph-copy > :nth-child(4) { animation-delay: .39s; }
.ph-home .ph-copy > :nth-child(5) { animation-delay: .5s; }
.ph-home .ph-copy > :nth-child(6) { animation-delay: .6s; }
.ph-home .ph-copy > :nth-child(7) { animation-delay: .7s; }
.ph-home .ph-visual.is-bleed picture { transform-origin: 80% 50%; animation: mv-zoom 1.6s cubic-bezier(.2, .7, .2, 1) backwards; }
.ph-home .ph-cta:not(.ph-cta-ghost) { position: relative; overflow: hidden; isolation: isolate; }
.ph-home .ph-cta:not(.ph-cta-ghost)::after { position: absolute; top: 0; bottom: 0; left: -60%; z-index: -1; width: 40%; content: ""; background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .38), transparent); transform: skewX(-18deg); animation: mv-shine 4.5s ease-in-out 1.6s infinite; }
@media (prefers-reduced-motion: reduce) {
    .ph-home .ph-copy > *, .ph-home .ph-visual.is-bleed picture, .ph-home .ph-cta::after { animation: none !important; }
}

/* ไอคอน LINE ในรายการติดต่อของ footer ให้ขนาดพอดีกับไอคอนอื่น (เดิมใหญ่กว่าเพราะโดนกฎโลโก้ LINE ทั่วไป) */
.kk-flist i span.ico.kk-line-logo { width: 16px; height: 15px; vertical-align: 0; }