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

/* ตัวแปรสีทั้งหมดของเว็บอยู่ที่ assets/css/theme-colors.css (โหลดก่อนไฟล์นี้เสมอ)
   ตัวแปรที่ไม่ใช่สี (เงา/ขนาด/ความกว้าง) ยังอยู่ที่นี่ */
:root{
      --radius-lg:22px;
      --max:1180px;
    }

    *{box-sizing:border-box}
    /* overflow-x:hidden ต้องอยู่ที่ html ไม่ใช่แค่ body — ของตกแต่งหลายจุด (เช่น .info-mascot/.faq-mascot
       ในหน้า product ที่ตั้งใจให้ "ล้น" ออกขวาด้วย right ติดลบ) ถ้า html ไม่ได้ปิด overflow ไว้ มือถือจะขยาย
       layout viewport ทั้งหน้าให้พอดีของที่ล้นแทน ทำให้ "ทั้งหน้า" เลื่อนซ้าย-ขวาได้ ไม่ใช่แค่ของชิ้นนั้นโดนตัด */
    html{scroll-behavior:smooth;overflow-x:hidden}
    body{
      margin:0;
      font-family:"Itim",cursive;
      color:var(--text);
      background:
        radial-gradient(circle at 12% 8%, color-mix(in srgb, var(--page-glow-1) 20%, transparent), transparent 26%),
        radial-gradient(circle at 86% 12%, color-mix(in srgb, var(--page-glow-2) 24%, transparent), transparent 25%),
        var(--bg);
      -webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;
    }
    input,textarea,[contenteditable]{
      -webkit-user-select:text;-moz-user-select:text;-ms-user-select:text;user-select:text;
    }
    button,input{font:inherit}
    img,video{display:block;width:100%}

    /* สีตาม HTML tag ทั่วไป (fallback สุดท้ายของทั้งเว็บ) — ปรับได้ที่ admin/theme-colors.html
       ค่าพวกนี้ถูกทับได้ง่ายด้วยกฎเฉพาะจุดที่ specificity สูงกว่า (เช่น .t-c-nav-links a) */
    h1{color:var(--h1-color)}
    h2{color:var(--h2-color)}
    p{color:var(--p-color)}
    span{color:var(--span-color)}
    strong{color:var(--strong-color)}
    label{color:var(--label-color)}
    a{color:var(--a-color);text-decoration:none}
    a:hover{color:var(--a-hover-color)}

    /* ป้องกันบั๊ก: กฎสีตาม tag ด้านบน (h1-h4/p/span/small/strong/label/a) มี specificity ต่ำมาก
       (แค่ tag เดียว) แต่ก็ยังตรงกับ tag ของ "ตัวหนังสือลูก" ที่ซ้อนอยู่ในป้าย/ปุ่ม/ชิปสีต่าง ๆ อยู่ดี
       (เช่น <span class="price-fire-amount"> ที่ซ้อนใน .price-tag.special ที่ตั้งใจให้ตัวหนังสือสีขาว)
       เพราะไม่มีกฎ class เฉพาะมาทับสี ตัวหนังสือลูกเลยได้สีตาม tag ไปแทนสีพื้นหลังที่ควรจะ contrast กัน
       เลยบังคับให้ตัวหนังสือลูกในป้าย/ปุ่ม/ชิปพวกนี้ "สืบสีจากพ่อแม่" เสมอ ไม่แคร่กฎสีตาม tag ด้านบน */
    :is(.badge,.info-pill,.pill,.chip,.btn,.t-c-tag,.t-c-btn-primary,.t-c-btn-secondary,
    .t-c-btn-order,.t-c-btn-action-primary,.t-c-btn-action-secondary,.t-c-footer-social-full,
    .sponsored-platform-tag,.sponsored-ai-badge,.chapter-count-badge,.count-badge,
    .product-page .download,.product-page .sticky button)
    :is(span,small,strong,label){
      color:inherit;
    }
    img{
      -webkit-user-drag:none;user-drag:none;-webkit-touch-callout:none;
      -webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;
    }

    .container{width:min(calc(100% - 32px),var(--max));margin:auto}

    .site-header{
      position:sticky;top:0;z-index:20;
      backdrop-filter:blur(16px);
    }
    .nav{display:flex;align-items:center;gap:28px}
    .brand{display:flex;align-items:center;gap:10px;font-weight:900;font-size:22px;white-space:nowrap}
    .brand-mark{
      width:42px;height:42px;border-radius:14px;display:grid;place-items:center;
      background:var(--yellow);box-shadow:inset 0 -3px 0 color-mix(in srgb, var(--shadow-black) 6%, transparent);font-size:24px;
    }
    .nav-links{display:flex;gap:8px;margin-left:auto}
    .nav-links a{padding:10px 14px;border-radius:12px;color:var(--muted);font-weight:700}
    .nav-links a:hover{background:var(--paper);color:var(--text)}

    .hero{padding:72px 0 42px}
    .hero-card{
      min-height:500px;border-radius:36px;overflow:hidden;position:relative;
      border:1px solid var(--line);box-shadow:var(--shadow);
      display:grid;grid-template-columns:1.05fr .95fr;
    }
    .hero-copy{padding:68px 26px 64px 64px;display:flex;flex-direction:column;justify-content:center;align-items:flex-start}
    .eyebrow{display:inline-flex;align-items:center;gap:8px;padding:8px 12px;border-radius:999px;font-size:13px;font-weight:900;letter-spacing:.02em;color:var(--eyebrow-text)}
    h1{font-size:clamp(42px,6vw,74px);line-height:.98;letter-spacing:-.055em;margin:20px 0 22px;max-width:700px}
    .hero-copy p{font-size:18px;line-height:1.75;color:var(--muted);max-width:590px;margin:0}
    .hero-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:30px}
    .btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:0 18px;border-radius:14px;border:1px solid transparent;font-weight:900;cursor:pointer;transition:.2s ease}
    .btn:hover{transform:translateY(-2px)}
    .btn-primary{background:var(--brand);color:var(--on-color);}
    .btn-primary:hover{background:var(--brand-dark)}
    .btn-secondary{background:var(--paper);border-color:var(--line)}

    .hero-art{position:relative;min-height:470px;overflow:hidden}
    .blob{position:absolute;border-radius:999px;filter:saturate(.95)}
    .blob.one{width:310px;height:310px;background:var(--yellow);right:36px;top:50px}
    .blob.two{width:210px;height:210px;background:var(--mint);left:12px;bottom:36px}
    .sheet-stack{position:absolute;inset:55px 35px 45px 55px;display:grid;place-items:center}
    .sheet{position:absolute;width:min(72%,350px);aspect-ratio:1/1.36;background:var(--paper);border-radius:18px;padding:25px}
    .sheet.s1{transform:rotate(-10deg) translate(-60px,12px)}
    .sheet.s2{transform:rotate(9deg) translate(60px,4px);}
    .sheet.s3{transform:rotate(-1deg)}
    .sheet-head{height:22px;border-radius:8px;width:70%;margin-bottom:18px}
    .worksheet-row{height:15px;border-radius:6px;margin:12px 0}
    .worksheet-row.short{width:68%}
    .worksheet-boxes{display:grid;grid-template-columns:repeat(4,1fr);gap:9px;margin-top:28px}
    .worksheet-boxes span{aspect-ratio:1;border-radius:9px}
    .mascot{position:absolute;right:20px;bottom:15px;width:94px;height:94px;border-radius:50%;background:var(--paper);display:grid;place-items:center;font-size:55px;box-shadow:var(--shadow);transform:rotate(5deg)}

    .section{padding:42px 0}
    .section-head{display:flex;justify-content:space-between;align-items:end;gap:20px;margin-bottom:24px}
    .section-title{margin:0;font-size:clamp(28px,4vw,42px);letter-spacing:-.035em}
    .section-sub{color:var(--muted);margin:8px 0 0;line-height:1.6}

    .categories{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
    .category{
      background:var(--paper);border:1px solid var(--line);padding:18px;border-radius:20px;
      display:flex;align-items:center;gap:14px;min-height:90px;transition:.2s ease;
    }
    .category:hover{transform:translateY(-3px);box-shadow:var(--shadow)}
    .category-icon{width:48px;height:48px;border-radius:15px;display:grid;place-items:center;font-size:24px;flex:0 0 auto}
    .category:nth-child(1) .category-icon{background:var(--skills-icon-1)}
    .category:nth-child(2) .category-icon{background:var(--skills-icon-2)}
    .category:nth-child(3) .category-icon{background:var(--skills-icon-3)}
    .category:nth-child(4) .category-icon{background:var(--skills-icon-4)}
    .category b{display:block;font-size:15px}
    .category span{font-size:12px;color:var(--muted)}

    .toolbar{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:22px}
    .search{flex:1;min-width:240px;position:relative}
    .search input{width:100%;height:48px;border:1px solid var(--line);border-radius:14px;background:var(--paper);padding:0 16px 0 44px;outline:none}
    .search input:focus{}
    .search::before{content:"⌕";position:absolute;left:16px;top:9px;font-size:25px;color:var(--search-icon)}
    .chips{display:flex;gap:8px;flex-wrap:wrap}

    .product-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
    .product-card{background:var(--paper);border:1px solid var(--line);border-radius:24px;overflow:hidden;transition:.22s ease}
    .product-card:hover{transform:translateY(-5px);box-shadow:var(--shadow)}
    .media-wrap{position:relative;aspect-ratio:1/1;background:var(--media-bg);overflow:hidden}
    .media-wrap img,.media-wrap video{width:100%;height:100%;object-fit:cover}
    .video-placeholder{width:100%;height:100%;display:grid;place-items:center;position:relative}
    .play{width:66px;height:66px;border-radius:50%;display:grid;place-items:center;background:color-mix(in srgb, var(--paper) 92%, transparent);font-size:27px;padding-left:4px;box-shadow:0 10px 25px color-mix(in srgb, var(--shadow-black) 12%, transparent)}
    .badge{position:absolute;top:14px;left:14px;border-radius:999px;padding:7px 10px;background:color-mix(in srgb, var(--paper) 92%, transparent);backdrop-filter:blur(7px);font-size:12px;font-weight:900}
    .badge.free{color:var(--free-badge)}
    .media-type{position:absolute;right:14px;top:14px;width:34px;height:34px;border-radius:11px;color:var(--on-color);display:grid;place-items:center;font-size:14px}
    .product-body{padding:17px}
    .product-meta{display:flex;gap:8px;align-items:center;font-size:12px;color:var(--muted);font-weight:700}
    .product-title{font-size:19px;line-height:1.35;margin:8px 0 6px;letter-spacing:-.015em}
    .product-desc{font-size:13px;color:var(--muted);line-height:1.6;margin:0;min-height:42px}
    .product-actions{display:flex;gap:9px;margin-top:16px}
    .product-actions .btn{flex:1;min-height:43px;font-size:13px;padding:0 12px}
    .btn-download{}
    .btn-etsy{color:var(--on-color)}
    .btn-preview{border-color:var(--line);background:var(--paper)}

    .cta{margin:50px auto 70px;border-radius:32px;background:var(--text);color:var(--on-color);display:grid;grid-template-columns:1fr auto;gap:30px;align-items:center;padding:40px 44px;overflow:hidden;position:relative}
    .cta::after{content:"✦";position:absolute;right:240px;top:-32px;font-size:140px;opacity:.05}
    .cta h2{margin:0 0 8px;font-size:34px;letter-spacing:-.035em}
    .cta p{margin:0;line-height:1.6}
    .cta .btn{background:var(--yellow);min-width:170px}

    footer{border-top:1px solid var(--line);padding:30px 0 44px;color:var(--muted);font-size:13px}
    .footer-row{display:flex;justify-content:space-between;gap:20px;align-items:center}

    .hidden{display:none!important}

    @media (max-width:900px){
      .hero-card{grid-template-columns:1fr}
      .hero-copy{padding:52px 34px 25px}
      .hero-art{min-height:410px}
      .categories{grid-template-columns:repeat(2,1fr)}
      .product-grid{grid-template-columns:repeat(2,1fr)}
      .nav-links a:not(.nav-etsy){display:none}
    }
    @media (max-width:620px){
      .container{width:min(calc(100% - 20px),var(--max))}
      .nav{}
      .brand{font-size:18px}.brand-mark{width:38px;height:38px}
      .hero{padding-top:24px}
      .hero-card{border-radius:26px}
      .hero-copy{padding:38px 22px 15px}
      h1{font-size:43px}
      .hero-copy p{font-size:15px}
      .hero-art{min-height:340px}
      .sheet-stack{inset:35px 8px 35px 8px}
      .categories{grid-template-columns:1fr 1fr;gap:10px}
      .category{padding:12px;min-height:78px;gap:10px}.category-icon{width:42px;height:42px}
      .product-grid{grid-template-columns:1fr;gap:14px}
      .product-card{border-radius:20px}
      .product-body{padding:15px}
      .product-title{font-size:18px}
      .product-desc{min-height:0}
      .product-actions .btn{min-height:46px}
      .section{padding:26px 0}
      .section-head{align-items:flex-start;flex-direction:column}
      .cta{grid-template-columns:1fr;padding:30px 24px}.cta .btn{width:100%}
      .footer-row{align-items:flex-start;flex-direction:column}
    }

/* Site logo */
.brand-mark{
  overflow:hidden;
  padding:0;
}
.brand-mark img{
  width:100%;
  height:100%;
  object-fit:contain;
  display:block;
}

/* ===== NAV logo update ===== */
.brand{
  gap:0;
}

.brand-mark{
  width:84px;
  height:84px;
  border-radius:0;
  background:transparent !important;
  box-shadow:none !important;
  overflow:visible;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:0;
}

.brand-mark img{
  width:200%;
  height:200%;
  max-width:none;
  object-fit:contain;
  display:block;
  background:transparent;
}

@media (max-width: 768px){
  .brand-mark{
    width:64px;
    height:64px;
  }
}

/* ===== Hero project banners =====
   แสดง banner-project-01.webp ถึง 03.webp พร้อมกัน */
.banner-showcase{
  position:absolute;
  inset:26px 18px 24px 22px;
  display:grid;
  place-items:center;
  perspective:1000px;
}

.banner-project{
  position:absolute;
  width:min(72%, 430px);
  max-height:88%;
  object-fit:contain;
  opacity:1;
  transform-origin:center center;
  will-change:transform;
}

/* วาง 3 ภาพแบบซ้อนเป็นพัด */
.banner-1{
  transform:translate3d(-110px,18px,0) rotate(-8deg) scale(.92);
  animation:bannerFloat1 5.8s ease-in-out infinite alternate;
  z-index:1;
}

.banner-2{
  transform:translate3d(0,-8px,0) rotate(0deg) scale(1);
  animation:bannerFloat2 6.4s ease-in-out infinite alternate;
  z-index:3;
}

.banner-3{
  transform:translate3d(110px,18px,0) rotate(8deg) scale(.92);
  animation:bannerFloat3 6.1s ease-in-out infinite alternate;
  z-index:2;
}

@keyframes bannerFloat1{
  from{transform:translate3d(-110px,18px,0) rotate(-8deg) scale(.92)}
  to{transform:translate3d(-118px,7px,0) rotate(-6.5deg) scale(.94)}
}

@keyframes bannerFloat2{
  from{transform:translate3d(0,-8px,0) rotate(0deg) scale(1)}
  to{transform:translate3d(0,-18px,0) rotate(1deg) scale(1.025)}
}

@keyframes bannerFloat3{
  from{transform:translate3d(110px,18px,0) rotate(8deg) scale(.92)}
  to{transform:translate3d(118px,6px,0) rotate(6.5deg) scale(.94)}
}

/* subtle background motion */
.hero-art .blob.one{
  animation:blobFloatOne 7s ease-in-out infinite alternate;
}
.hero-art .blob.two{
  animation:blobFloatTwo 6s ease-in-out infinite alternate;
}

@keyframes blobFloatOne{
  from{transform:translate3d(0,0,0) scale(1)}
  to{transform:translate3d(-12px,10px,0) scale(1.035)}
}
@keyframes blobFloatTwo{
  from{transform:translate3d(0,0,0) scale(1)}
  to{transform:translate3d(10px,-8px,0) scale(.97)}
}

@media (max-width:900px){
  .banner-showcase{inset:18px 10px 22px}
  .banner-project{width:min(68%,390px)}
  .banner-1{transform:translate3d(-82px,18px,0) rotate(-8deg) scale(.9)}
  .banner-3{transform:translate3d(82px,18px,0) rotate(8deg) scale(.9)}
}

@media (max-width:620px){
  .banner-showcase{inset:10px 2px 16px}
  .banner-project{width:min(70%,340px)}
}

@media (prefers-reduced-motion:reduce){
  .banner-project,
  .hero-art .blob.one,
  .hero-art .blob.two{
    animation:none!important;
  }
}

/* ===== NAV FINAL — single source of truth =====
   Navbar background = 100%
   Navbar inner content = 90%
   Vertical spacing is defined ONLY here */
.site-header{
  width:100%;
}

.site-header .container{
  width:90%;
  max-width:none;
  margin:0 auto;
}

.nav{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:40px;

  /* มี padding บน-ล่างตรงนี้จุดเดียว */
  padding:10px 0;

  height:auto;
  min-height:0;
  position:relative;
}

.brand{
  flex:0 0 auto;
  display:flex;
  align-items:center;
  margin:0;
}

.brand-mark{
  width:240px;
  height:72px;
  border-radius:0;
  background:transparent !important;
  box-shadow:none !important;
  overflow:visible;
  display:flex;
  align-items:center;
  justify-content:flex-start;
  padding:0;
}

.brand-mark img{
  width:100% !important;
  height:100% !important;
  max-width:none;
  object-fit:contain;
  object-position:left center;
  display:block;
  background:transparent;
}

.nav-links{
  margin-left:auto;
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:16px;
}

.nav-links a{
  padding:10px 12px;
  white-space:nowrap;
}

/* ปิด decoration ที่เคยชนตัวเมนูโดยตรง */
.nav::before,
.nav::after,
.nav-etsy::before{
  display:none !important;
}

/* decoration อยู่ริม Navbar แทน ไม่ชนกับ content */
.site-header{
  position:sticky;
}

.site-header::before{
  content:"✈";
  position:absolute;
  left:1.2%;
  top:50%;
  transform:translateY(-50%) rotate(-14deg);
  font-size:23px;
  opacity:.52;
  pointer-events:none;
}

.site-header::after{
  content:"♡";
  position:absolute;
  right:1.35%;
  top:50%;
  transform:translateY(-50%) rotate(8deg);
  font-size:28px;
  opacity:.78;
  pointer-events:none;
}

@media (max-width:1200px){
  .site-header::before,
  .site-header::after{display:none}
  .site-header .container{width:94%}
  .nav{gap:24px;padding:10px 0}
  .nav-links{gap:8px}
  .nav-links a{padding:9px}
  .brand-mark{width:210px;height:64px}
}

@media (max-width:900px){
  .nav{padding:10px 0}
  .brand-mark{width:190px;height:58px}
}

@media (max-width:620px){
  .site-header .container{width:calc(100% - 24px)}
  .nav{padding:10px 0}
  .brand-mark{width:170px;height:52px}
}

/* ===== Button typography for Itim ===== */
.btn,
.chip,
.nav-etsy{
  font-weight:400;
}

.btn-primary,
.btn-download,
.btn-etsy,
.nav-etsy{
  text-shadow:0 1px 2px color-mix(in srgb, var(--shadow-black) 16%, transparent);
}

/* ===== Product media labels ===== */

/* แสดงเฉพาะงานฟรี และวางมุมขวาล่างของรูป */
.badge.free{
  top:auto;
  left:auto;
  right:14px;
  bottom:14px;
  background:color-mix(in srgb, var(--paper) 92%, transparent);
  color:var(--free-badge);
  padding:7px 11px;
  border-radius:999px;
  font-weight:400;
}

/* ไอคอน Video ใช้เฉพาะ card ที่มี <video> และทำพื้นหลังให้จางลง */
.media-type{
  color:color-mix(in srgb, var(--on-color) 92%, transparent);
  backdrop-filter:blur(5px);
  -webkit-backdrop-filter:blur(5px);
}

/* ===== Softer Free badge + Video icon ===== */
.badge.free{
  background:color-mix(in srgb, var(--paper) 88%, transparent);
  color:var(--free-badge);
  border:1px solid color-mix(in srgb, var(--free-badge) 28%, transparent);
  box-shadow:0 2px 8px color-mix(in srgb, var(--free-badge) 8%, transparent);
}

.media-type{
  color:color-mix(in srgb, var(--on-color) 86%, transparent);
  box-shadow:none;
  backdrop-filter:blur(4px);
  -webkit-backdrop-filter:blur(4px);
}

/* ===== Product card content update ===== */
.product-meta{
  font-size:13px;
  font-weight:400;
  letter-spacing:.01em;
  color:var(--product-meta-text);
}

.product-title{
  margin:8px 0 10px;
  font-size:24px;
  line-height:1.25;
  font-weight:400;
  color:var(--product-title-text);
}

.product-tags{
  display:flex;
  flex-direction:column;
  gap:8px;
  margin:0 0 16px;
}

/* แถวป้ายบท/EP/จำนวนหน้า: บังคับแถวเดียวเสมอ ถ้าล้นให้เลื่อนซ้าย-ขวาแทนขึ้นบรรทัดใหม่ (ซ่อน scrollbar) */
.tag-row{
  display:flex;
  flex-wrap:nowrap;
  flex-shrink:0;
  gap:8px;
  overflow-x:auto;
  scrollbar-width:none;
  -ms-overflow-style:none;
}
.tag-row::-webkit-scrollbar{display:none}
.tag-row .info-pill{flex:0 0 auto;white-space:nowrap}

/* แถวราคา (กล่องราคาพิเศษ + ราคาปกติ): กว้าง 100% ของแถวแท็กจึงขึ้นบรรทัดใหม่เสมอ ทุกแบบของการ์ด */
.product-price-row{
  flex:0 0 100%;
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:8px;
}

/* .t-c-product-tags (การ์ดหน้าแรก) เป็น flex-direction:column ไม่ใช่ row-wrap แบบ .product-tags เดิม —
   flex:0 0 100% ด้านบนตั้งใจให้ "กว้าง 100%" ตอนอยู่ใน row-wrap แต่พอมาอยู่ใน column แกนหลักกลายเป็นแนวตั้ง
   100% เลยหมายถึง "สูง 100% ของพ่อ" แทน ทำให้เกิด circular sizing (ความสูงพ่อคำนวณจากลูก แต่ลูกขอ 100% ของพ่อ)
   การ์ดเลยเตี้ยผิดจนราคาล้นทับปุ่มด้านล่าง — reset กลับเป็น auto เพราะ column เรียงคนละบรรทัดให้อยู่แล้วไม่ต้องพึ่ง 100% */
.t-c-product-tags .product-price-row{flex:0 0 auto}

.info-pill{
  display:inline-flex;
  align-items:center;
  min-height:32px;
  padding:0 12px;
  border-radius:999px;
  background:var(--paper);
  border:1px solid color-mix(in srgb, var(--pill-border) 95%, transparent);
  color:var(--pill-text);
  font-size:13px;
  font-weight:400;
  box-shadow:0 4px 12px color-mix(in srgb, var(--shadow-brown) 4%, transparent);
}

.info-pill.price-tag{
  border-color:transparent;
  font-weight:900;
  font-size:14px;
}

.info-pill.price-tag.special{
  /* ตั้งใจใช้สีโคอรัลเดิมตรง ๆ ไม่ผูกกับ --brand/--brand-dark เพราะ user อยากให้ป้ายราคานี้
     คงสีเดิมไว้เสมอ ไม่ว่าธีมสีหลักของเว็บจะเปลี่ยนเป็นอะไรก็ตาม */
  background:linear-gradient(135deg,var(--price-special-from),var(--price-special-to));
  color:var(--on-color);
  box-shadow:0 6px 14px color-mix(in srgb, var(--price-special-shadow) 35%, transparent);
}

.price-fire{
  gap:5px;
  font-weight:400;
  animation:hkm-price-fire-pulse 1.6s ease-in-out infinite;
}

.price-fire-icon{
  font-size:15px;
  line-height:1;
  color:inherit;
}

.price-fire-amount{
  font-weight:900;
  font-size:15px;
  color:inherit;
}

.price-fire-unit{
  font-weight:400;
  font-size:12px;
  opacity:.9;
  color:inherit;
}

@keyframes hkm-price-fire-pulse{
  0%,100%{transform:scale(1)}
  50%{transform:scale(1.08)}
}

@media (prefers-reduced-motion:reduce){
  .price-fire{animation:none}
}

.info-pill.price-tag.regular-strike{
  min-height:auto;
  padding:0 4px;
  background:transparent;
  border-color:transparent;
  box-shadow:none;
  color:var(--muted);
  font-size:12px;
  font-weight:400;
}

/* ฟอนต์ Itim ที่ใช้ทั้งเว็บวางเส้น strikeout ของ text-decoration:line-through ผิดตำแหน่งกับตัวอักษรไทย
   (ลองแล้ว: ภาษาอังกฤษเส้นตัดกลางตัวอักษรพอดี แต่ "ปกติ" ภาษาไทยเส้นลอยไม่โดนตัวอักษรเลย มองไม่เห็นเส้น)
   แก้โดยเลิกใช้ text-decoration แล้ววาดเส้นเองด้วย ::after กึ่งกลางกล่องแทน ควบคุมตำแหน่งได้ตรงทุกภาษา */
.info-pill.price-tag.regular-strike s{
  position:relative;
  text-decoration:none;
}
.info-pill.price-tag.regular-strike s::after{
  content:"";
  position:absolute;
  left:-1px;
  right:-1px;
  top:50%;
  height:1px;
  background:currentColor;
  transform:translateY(-50%);
}

.product-actions{
  position:relative;
  display:grid;
  grid-template-columns:1fr;
  gap:10px;
  margin-top:14px;
  padding-top:14px;
}

.product-actions::before{
  content:"";
  position:absolute;
  top:0;
  left:5%;
  width:90%;
  height:1px;
  background:var(--line);
}

.product-actions .btn{
  min-height:46px;
  border-radius:14px;
  font-size:15px;
  font-weight:400;
  letter-spacing:.01em;
  transition:transform .18s ease, box-shadow .18s ease, background .18s ease;
  justify-content:center;
}

.product-actions .btn:hover{
  transform:translateY(-2px);
}

.btn-download{
  color:var(--on-color);
  box-shadow:0 10px 20px color-mix(in srgb, var(--price-special-to) 18%, transparent);
  text-shadow:0 1px 2px color-mix(in srgb, var(--shadow-black) 14%, transparent);
}


.btn-etsy{
  color:var(--on-color);
  text-shadow:0 1px 2px color-mix(in srgb, var(--shadow-black) 16%, transparent);
}

.btn-preview{
  background:color-mix(in srgb, var(--paper) 98%, transparent);
  box-shadow:0 8px 18px color-mix(in srgb, var(--shadow-brown) 8%, transparent);
  text-shadow:none;
}

.btn-preview:hover{
  background:var(--bg);
}

@media (max-width:620px){
  .product-title{
    font-size:21px;
  }
}

/* ===== Button & chip system =====
   (เดิมมี 3 ชุดซ้อนทับกัน: Brighter button system → Extra vibrant button theme →
   Button colors matched to selected theme — รวมเหลือชุดเดียว เก็บค่าที่ "ชนะ" จริง
   ในเบราว์เซอร์ไว้ทุกจุด ไม่มีสีไหนเปลี่ยนจากที่แสดงผลอยู่ปัจจุบัน) */

.btn{
  font-weight:400;
  border-radius:15px;
  transition:transform .18s ease, box-shadow .18s ease, filter .18s ease;
}

.btn:hover{
  transform:translateY(-2px);
  filter:saturate(1.08);
}

/* Hero / main action */
.btn-primary{
  background:linear-gradient(180deg,var(--btn-product-from) 0%,var(--btn-product-to) 100%);
  color:var(--btn-product-text);
  border:1px solid color-mix(in srgb, var(--btn-product-border) 42%, transparent);
  box-shadow:0 10px 22px color-mix(in srgb, var(--btn-primary-glow) 24%, transparent);
  text-shadow:0 1px 2px color-mix(in srgb, var(--shadow-black) 12%, transparent);
}

.btn-primary:hover{
  background:linear-gradient(180deg,var(--btn-product-from) 0%,var(--btn-product-to) 100%);
  box-shadow:0 12px 26px color-mix(in srgb, var(--btn-primary-glow) 30%, transparent);
}

/* Secondary / preview-style */
/* ปุ่มรอง (ทุกหน้า) — เหลืองอ่อน ชุดเดียวกับ .t-c-btn-secondary (--hero-btn-secondary-*) */
.btn-secondary{
  background:linear-gradient(180deg,var(--hero-btn-secondary-from) 0%,var(--hero-btn-secondary-to) 100%);
  color:var(--hero-btn-secondary-text);
  border:1px solid color-mix(in srgb,var(--hero-btn-secondary-border) 55%,transparent);
  box-shadow:0 7px 16px color-mix(in srgb, var(--btn-soft-shadow) 10%, transparent);
  text-shadow:none;
}

.btn-secondary:hover{
  border-color:color-mix(in srgb,var(--hero-btn-secondary-border) 95%,transparent);
  box-shadow:0 9px 20px color-mix(in srgb, var(--btn-soft-shadow) 16%, transparent);
  filter:brightness(1.03);
}

/* ปุ่ม "ดูตัวอย่าง" — คงสีเดิม (ขาว-ครีม ขอบพีช) ตามที่ user สั่ง ใช้ตัวแปร --btn-secondary-* */
.btn-preview{
  background:linear-gradient(180deg,var(--btn-secondary-from) 0%,var(--btn-secondary-to) 100%);
  color:var(--btn-secondary-text);
  border:1px solid color-mix(in srgb, var(--btn-preview-border) 55%, transparent);
  box-shadow:0 7px 16px color-mix(in srgb, var(--btn-soft-shadow) 10%, transparent);
  text-shadow:none;
}

.btn-preview:hover{
  background:linear-gradient(180deg,var(--btn-preview-hover-from) 0%,var(--btn-preview-hover-to) 100%);
  color:var(--btn-preview-hover-text);
  border-color:color-mix(in srgb, var(--btn-preview-hover-border) 68%, transparent);
  box-shadow:0 9px 20px color-mix(in srgb, var(--btn-soft-shadow) 16%, transparent);
}

/* Free download (ธีมโคอรัลเดียวกับปุ่มหลัก) */
.btn-download{
  background:linear-gradient(180deg,var(--btn-product-from) 0%,var(--btn-product-to) 100%);
  color:var(--btn-product-text);
  border:1px solid color-mix(in srgb, var(--btn-product-border) 42%, transparent);
  box-shadow:0 10px 22px color-mix(in srgb, var(--btn-primary-glow) 24%, transparent);
  text-shadow:0 1px 2px color-mix(in srgb, var(--shadow-black) 12%, transparent);
}

.btn-download:hover{
  background:linear-gradient(180deg,var(--btn-product-from) 0%,var(--btn-product-to) 100%);
  box-shadow:0 12px 26px color-mix(in srgb, var(--btn-primary-glow) 30%, transparent);
}

/* Etsy (ปุ่มในเมนูด้านบน) = โกโก้เข้ม */


/* ปุ่มสินค้า (ดาวน์โหลด / สั่งซื้อ ในการ์ด + ปุ่มดาวน์โหลดและปุ่มลอยในหน้าสินค้า) — ปุ่ม "ตัวอย่าง" คงสีเดิม
   ใช้สีชุดเดียวกัน ปรับได้ที่ admin/theme-colors.html (หมวด "ปุ่ม & Chip")
   ต้องใช้ !important เพราะมีกฎเดิมของแต่ละปุ่มกระจายอยู่หลายจุดที่ประกาศสีไว้ทีหลัง
   เงาใช้สีเดียวกับพื้นปุ่ม ไม่ใช้เงาโกโก้เข้มเดิมที่ทำให้ดูหม่น */
.btn.btn-download,
.btn.btn-etsy,
.product-page .download,
.product-page .sticky button{
  background:linear-gradient(180deg,var(--btn-product-from) 0%,var(--btn-product-to) 100%) !important;
  color:var(--btn-product-text) !important;
  border:1px solid var(--btn-product-border) !important;
  box-shadow:0 9px 20px color-mix(in srgb, var(--btn-product-to) 32%, transparent);
  text-shadow:none;
}

.btn.btn-download:hover,
.btn.btn-etsy:hover,
.product-page .download:hover,
.product-page .sticky button:hover{
  background:linear-gradient(180deg,color-mix(in srgb, var(--btn-product-from) 90%, var(--shadow-black)) 0%,color-mix(in srgb, var(--btn-product-to) 90%, var(--shadow-black)) 100%) !important;
  box-shadow:0 11px 24px color-mix(in srgb, var(--btn-product-to) 44%, transparent);
}

/* Filter chips */



/* Product action buttons */
.product-actions .btn{
  min-height:48px;
  border-radius:15px;
  font-size:15px;
  font-weight:400;
}

/* subtle press feedback */
.btn:active,
.chip:active,
.nav-etsy:active{
  transform:translateY(0) scale(.985);
}

/* ===== Product detail variables =====
   ตัวแปรสีของหน้านี้ (--coral, --ink, --muted, --line, --sky-dark, --lilac ฯลฯ)
   อยู่ที่ assets/css/theme-colors.css แล้ว (สโคปไว้ที่ .product-page เพื่อไม่ให้ทับธีมสีทั้งเว็บ)
   เหลือแค่ตัวแปรที่ไม่ใช่สีไว้ที่นี่ */
.product-page{
      /* --shadow ไม่ประกาศซ้ำที่นี่แล้ว — ใช้ค่าเดียวกับทั้งเว็บจาก :root (theme-colors.css, ฟิลด์ shadow-base)
         เดิมทับด้วยโทนเทา/ดำ (--shadow-black) ทำให้เงาบนหน้าสินค้าต่างจากหน้าอื่น */
      --radius:22px;
    }

.product-page .shell{max-width:1160px;margin:auto;padding:14px 16px 40px}
    .product-page .product-localbar{
      display:flex;align-items:center;justify-content:flex-end;
      gap:12px;padding:4px 0 16px;
    }
    .product-page .brand{font-weight:900;font-size:17px;letter-spacing:.1px}
    .product-page .breadcrumb{
      display:flex;flex-wrap:wrap;align-items:center;gap:8px;
      font-size:13.5px;font-weight:600;color:var(--ink,#222);margin-bottom:16px;line-height:1.5;
    }
    .product-page .breadcrumb a{color:var(--ink,#222);text-decoration:none;opacity:.65}
    .product-page .breadcrumb a:hover{color:var(--coral-dark);opacity:1;text-decoration:underline}
    .product-page .breadcrumb .sep{color:var(--coral-dark);opacity:.55;font-weight:700}
    .product-page .breadcrumb .current{
      color:var(--coral-dark);font-weight:800;
      max-width:260px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
    }
    @media (max-width:480px){
      .product-page .breadcrumb .current{max-width:150px}
    }
    .product-page .share{
      border:1px solid var(--line);background:var(--paper);border-radius:999px;padding:10px 14px;
      font-weight:700;cursor:pointer;
    }
    .product-page .product{display:grid;gap:24px;position:relative;z-index:0;margin-bottom:26px}
    .product-page .gallery{
      min-width:0;background:var(--paper);border-radius:28px;padding:20px;
      box-shadow:0 10px 30px color-mix(in srgb, var(--brand) 14%, transparent);
      display:flex;flex-direction:column;justify-content:center;
    }
    .product-page .main-image-wrap{
      position:relative;background:var(--paper);border-radius:var(--radius);overflow:hidden;
      box-shadow:0 4px 14px color-mix(in srgb, var(--shadow-black) 6%, transparent);aspect-ratio:1/1;
    }
    .product-page .main-image{width:100%;height:100%;display:block;object-fit:contain;background:var(--paper)}
    .product-page .free-chip{
      position:absolute;top:14px;right:14px;background:var(--paper);color:var(--green);font-weight:900;
      border:2px solid var(--green);padding:9px 14px;border-radius:999px;box-shadow:0 5px 15px color-mix(in srgb, var(--shadow-black) 8%, transparent)
    }
    .product-page .thumbs-row{display:flex;align-items:center;gap:6px;margin-top:12px}
    .product-page .thumb-nav{
      flex:0 0 auto;width:30px;height:30px;border-radius:50%;border:1px solid var(--line);
      background:var(--paper);color:var(--ink);font-size:16px;line-height:1;cursor:pointer;
      display:flex;align-items:center;justify-content:center;box-shadow:0 3px 8px color-mix(in srgb, var(--shadow-black) 6%, transparent);
    }
    .product-page .thumb-nav:hover{background:var(--sky-soft)}
    .product-page .thumbs{
      display:flex;gap:10px;overflow-x:auto;padding:2px;scrollbar-width:none;
      scroll-snap-type:x proximity;flex:1;min-width:0;
    }
    .product-page .thumbs::-webkit-scrollbar{display:none}
    .product-page .thumb{
      flex:0 0 72px;width:72px;height:72px;border:2px solid transparent;padding:0;background:var(--paper);
      border-radius:14px;overflow:hidden;cursor:pointer;scroll-snap-align:start;
    }
    .product-page .thumb img{width:100%;height:100%;object-fit:cover;display:block}
    .product-page .thumb.active{border-color:var(--lilac)}
    .product-page .info{
      padding:22px 24px;position:relative;z-index:1;background:var(--product-info-bg);
      border-radius:28px;box-shadow:0 10px 30px color-mix(in srgb, var(--shadow-brown-dark) 6%, transparent);
      transition:box-shadow .25s ease;
    }
    .product-page .info:hover{box-shadow:0 14px 36px color-mix(in srgb, var(--shadow-brown-dark) 10%, transparent)}
    .product-page .eyebrow{display:flex;align-items:center;gap:8px;margin-bottom:10px;flex-wrap:wrap;background:transparent;padding:0}
    .product-page .pill{
      display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:800;
      border-radius:999px;padding:5px 12px 5px 5px;color:var(--coral-dark);
      transition:transform .18s ease,box-shadow .18s ease;
    }
    .product-page .pill:hover{transform:translateY(-2px) scale(1.04);box-shadow:0 4px 10px color-mix(in srgb, var(--shadow-black) 8%, transparent)}
    .product-page .pill-icon{
      display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;
      border-radius:50%;font-size:11px;background:color-mix(in srgb, var(--paper) 60%, transparent);overflow:hidden;flex:0 0 auto;
    }
    .product-page .pill-icon img{width:100%;height:100%;object-fit:cover;display:block}
    .product-page .pill.free{}
    .product-page .pill-green{background:var(--pill-green-bg);color:var(--pill-green-text)}
    .product-page .pill-green .pill-icon{background:var(--pill-green-icon)}
    .product-page .pill-pink{background:var(--pill-pink-bg);color:var(--pill-pink-text)}
    .product-page .pill-pink .pill-icon{background:var(--pill-pink-icon)}
    .product-page .pill-lilac{background:var(--lilac-soft);color:var(--pill-lilac-text)}
    .product-page .pill-lilac .pill-icon{background:var(--pill-lilac-icon)}
    .product-page h1{font-size:27px;line-height:1.25;margin:0 0 10px;letter-spacing:-.3px}
    .product-page .sub{color:var(--muted);line-height:1.6;margin:0 0 18px;font-size:15px}
    .product-page .stats{
      display:grid;grid-template-columns:repeat(3,1fr);margin-bottom:20px;
      background:var(--paper);border-radius:20px;box-shadow:0 6px 18px color-mix(in srgb, var(--brand) 14%, transparent);
      overflow:hidden;
    }
    .product-page .stat{
      padding:16px 10px;text-align:center;position:relative;
      transition:background .18s ease,transform .18s ease;
    }
    .product-page .stat:not(:last-child)::after{
      content:"";position:absolute;top:14%;right:0;bottom:14%;width:1px;
      background:color-mix(in srgb, var(--brand) 22%, transparent);
    }
    .product-page .stat:hover{background:color-mix(in srgb, var(--paper) 50%, transparent);transform:translateY(-3px)}
    .product-page .stat:hover .stat-icon{transform:scale(1.08)}
    .product-page .stat-icon{
      display:flex;align-items:center;justify-content:center;width:42px;height:42px;
      border-radius:50%;margin:0 auto 7px;background:var(--paper);
      box-shadow:0 3px 8px color-mix(in srgb, var(--shadow-black) 8%, transparent);transition:transform .18s ease;
    }
    .product-page .stat-icon img{width:26px;height:26px;object-fit:contain;display:block}
    .product-page .stat strong{display:block;font-size:20px;margin-bottom:2px}
    .product-page .stat span{font-size:12px;color:var(--muted);font-weight:600}
    .product-page .download{
      width:100%;border:0;background:linear-gradient(180deg,var(--coral),var(--coral-dark));
      color:var(--on-color);font-weight:900;font-size:18px;padding:15px 18px;border-radius:16px;cursor:pointer;
      box-shadow:0 10px 24px color-mix(in srgb, var(--step-num-shadow) 28%, transparent)
    }
    .product-page .download small{display:block;font-size:12px;font-weight:600;opacity:.85;margin-top:2px}
    .product-page .note{text-align:center;color:var(--muted);font-size:12px;margin:9px 0 0}
    .product-page .section{margin-top:28px;border-top:1px solid var(--line);padding-top:22px}
    .product-page .section h2{font-size:19px;margin:0 0 13px}
    .product-page .features{
      display:grid;grid-template-columns:1fr 1fr;gap:14px 18px;
      background:var(--paper);border:1px solid var(--line);border-radius:18px;padding:18px;
    }
    .product-page .feature{display:flex;gap:11px;align-items:flex-start;line-height:1.5;transition:transform .18s ease}
    .product-page .feature:hover{transform:translateY(-2px)}
    .product-page .feature:hover .icon{transform:scale(1.08)}
    .product-page .feature .icon{width:34px;height:34px;border-radius:10px;background:var(--paper);display:grid;place-items:center;flex:0 0 34px;box-shadow:0 2px 6px color-mix(in srgb, var(--shadow-black) 6%, transparent);transition:transform .18s ease}
    .product-page .feature b{display:block;font-size:15.5px;font-weight:800}
    .product-page .feature span{color:var(--muted);font-size:13.5px}
    .product-page .feature.feature-price b{font-size:16px;}
    .product-page .feature.feature-special .icon{background:linear-gradient(135deg,var(--coral),var(--coral-dark))}
    .product-page .feature.feature-special b{font-size:16px;color:var(--coral-dark)}
    .product-page .preview-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
    .product-page .preview-grid img{width:100%;display:block;border:1px solid var(--line);border-radius:14px;}
    .product-page .sticky{
      position:fixed;left:0;right:0;bottom:0;z-index:30;background:color-mix(in srgb, var(--paper) 94%, transparent);
      backdrop-filter:blur(14px);border-top:1px solid var(--line);padding:10px 14px calc(10px + env(safe-area-inset-bottom));
    }
    .product-page .sticky-inner{max-width:1160px;margin:auto;display:flex;align-items:center;gap:12px}
    .product-page .sticky-copy{min-width:0;flex:1}
    .product-page .sticky-copy b{display:block;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
    .product-page .sticky-copy span{color:var(--green);font-weight:900;font-size:14px}
    .product-page .sticky button{border:0;background:var(--coral);color:var(--on-color);font-weight:900;border-radius:14px;padding:13px 18px;cursor:pointer}
    .product-page .toast{
      position:fixed;left:50%;bottom:108px;transform:translate(-50%,16px);background:var(--toast-bg);color:var(--on-color);
      padding:11px 14px;border-radius:12px;font-size:13px;opacity:0;pointer-events:none;transition:.2s;z-index:50;
      max-width:calc(100vw - 32px);text-align:center
    }
    .product-page .toast.show{opacity:1;transform:translate(-50%,0)}
    @media (min-width:800px){
      
      .product-page .shell{padding-top:24px}
      .product-page .product{grid-template-columns:minmax(0,1.08fr) minmax(360px,.92fr);align-items:stretch}
      .product-page .info{position:sticky;top:20px;padding:14px 8px 0 14px}
      .product-page h1{font-size:34px}
      .product-page .main-image-wrap{aspect-ratio:1/1}
      .product-page .thumb{flex-basis:82px;width:82px;height:82px}
      .product-page .sticky{display:none}
      .product-page .preview-grid{grid-template-columns:repeat(3,1fr)}
    }

/* ===== Product detail page ===== */
.product-page{
  background:var(--bg);
  color:var(--text);
}

.product-page .shell{
  max-width:1160px;
  margin:auto;
  padding:24px 16px 40px;
}

.product-page .product-localbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:4px 0 18px;
}

.product-page .back,
.product-page .share{
  font-family:"Itim",cursive;
}

.product-page .download,
.product-page .sticky button{
  font-family:"Itim",cursive;
  font-weight:400;
  box-shadow:0 10px 22px color-mix(in srgb, var(--btn-primary-glow) 24%, transparent);
  transition:transform .2s ease,box-shadow .2s ease,filter .2s ease;
}
.product-page .download:hover{
  transform:translateY(-3px);
  box-shadow:0 14px 30px color-mix(in srgb, var(--btn-primary-glow) 36%, transparent);
  filter:brightness(1.05);
}
.product-page .download{border-radius:999px}
.product-page .download:active{transform:translateY(0)}
.product-page .download span{display:inline-block;transition:transform .2s ease}
.product-page .download:hover span{transform:scale(1.08)}

.product-page .pill,
.product-page h1,
.product-page h2,
.product-page .stat strong,
.product-page .sticky-copy{
  font-weight:400;
}

.product-page .free-chip{
  font-weight:400;
  border-width:1px;
}

@media (min-width:800px){
  .product-page .info{
    top:116px;
  }
}

/* ===== Free worksheets page ===== */
.free-page{
  min-height:100vh;
}

/* ===== Hero หน้า Free (ใหม่) — ใช้ตัวแปรสีเดียวกับ Hero หน้าแรก (แก้ที่หมวด Hero ในหน้า admin) ===== */
.t-c-free-hero{
  position:relative;
  padding:60px 0 52px;
  background:linear-gradient(135deg,var(--hero-bg-from) 0%,var(--hero-bg-to) 100%);
  overflow:hidden;
}
.t-c-free-hero-inner{
  display:grid;
  grid-template-columns:1.1fr .9fr;
  gap:32px;
  align-items:center;
}
.t-c-free-badge{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:8px 14px;
  border-radius:999px;
  background:var(--eyebrow-mint-bg);
  color:var(--eyebrow-mint-text);
  border:1px solid color-mix(in srgb,var(--eyebrow-mint-text) 22%,transparent);
  font-size:13px;
  font-weight:600;
  margin-bottom:16px;
}
.t-c-free-hero-copy h1{
  font-size:clamp(34px,4.6vw,54px);
  line-height:1.2;
  font-weight:700;
  margin:0 0 16px;
}
.t-c-free-hero-copy .t-c-free-title-1{color:var(--hero-title-1)}
.t-c-free-hero-copy .t-c-free-title-accent{color:var(--hero-title-2-accent)}
.t-c-free-hero-copy > p{
  color:var(--hero-description);
  font-size:16px;
  line-height:1.75;
  max-width:520px;
  margin:0 0 22px;
}
.t-c-free-stats{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  list-style:none;
  padding:0;
  margin:0 0 26px;
}
.t-c-free-stats li{
  display:flex;
  flex-direction:column;
  align-items:center;
  min-width:96px;
  padding:10px 16px;
  border-radius:18px;
  background:var(--hero-badge-bg);
  border:1px solid var(--line);
  box-shadow:0 6px 16px color-mix(in srgb,var(--brand) 14%,transparent);
  transition:transform .2s ease,box-shadow .2s ease;
}
.t-c-free-stats li:hover{
  transform:translateY(-3px);
  box-shadow:0 10px 22px color-mix(in srgb,var(--brand) 22%,transparent);
}
.t-c-free-stats li .t-c-free-stat-n{
  font-size:24px;
  font-weight:700;
  line-height:1.15;
  color:var(--hero-title-2-accent);
}
.t-c-free-stats li span:not(.t-c-free-stat-n){
  font-size:12px;
  color:var(--hero-badge-text);
}
.t-c-free-hero-copy .t-c-hero-actions{margin-bottom:0}

/* ฝั่งรูป: ก้อนสีพื้นหลัง + มาสคอต 2 ตัว + ป้าย FREE + ดาว/หัวใจลอยเบา ๆ */
.t-c-free-hero-art{
  position:relative;
  min-height:360px;
}
.t-c-free-blob{position:absolute;border-radius:50%;pointer-events:none}
.t-c-free-blob-1{
  width:min(340px,80%);
  aspect-ratio:1;
  right:6%;
  top:50%;
  transform:translateY(-50%);
  background:var(--hero-blob-1);
}
.t-c-free-blob-2{
  width:34%;
  aspect-ratio:1;
  left:4%;
  bottom:4%;
  background:var(--hero-blob-2);
  opacity:.55;
}
.t-c-free-mascot{
  position:absolute;
  height:auto;
  filter:drop-shadow(0 12px 18px color-mix(in srgb,var(--brand) 26%,transparent));
  animation:hkmFreeFloat 4.6s ease-in-out infinite;
  user-select:none;
}
.t-c-free-girl{width:min(300px,58%);right:6%;bottom:0}
.t-c-free-boy{width:min(220px,42%);left:6%;bottom:8%;animation-delay:-2.2s}
.t-c-free-ribbon{
  position:absolute;
  right:10%;
  top:6%;
  padding:8px 18px;
  border-radius:999px;
  background:linear-gradient(180deg,var(--btn-product-from) 0%,var(--btn-product-to) 100%);
  color:var(--btn-product-text);
  font-weight:700;
  font-size:16px;
  letter-spacing:.08em;
  transform:rotate(8deg);
  box-shadow:0 8px 18px color-mix(in srgb,var(--btn-product-border) 40%,transparent);
  animation:hkmFreeWobble 3.4s ease-in-out infinite;
}
.t-c-free-deco{position:absolute;height:auto;pointer-events:none}
.t-c-free-star-1{width:38px;left:34%;top:6%;animation:hkmFreeTwinkle 2.8s ease-in-out infinite}
.t-c-free-star-2{width:26px;right:2%;bottom:34%;animation:hkmFreeTwinkle 3.4s ease-in-out infinite;animation-delay:-1.2s}
.t-c-free-heart-1{width:30px;left:2%;top:30%;animation:hkmFreeTwinkle 3.1s ease-in-out infinite;animation-delay:-.6s}
.t-c-free-heart-2{width:22px;right:30%;top:2%;animation:hkmFreeTwinkle 2.6s ease-in-out infinite;animation-delay:-1.8s}

/* element ที่ใส่ hidden แต่ถูก display:flex/inline-flex ของ CSS ทับ (author CSS ชนะ UA hidden) — ต้องบังคับซ่อนเอง */
.t-c-free-stats li[hidden],
.t-c-free-hero .t-c-hero-actions [hidden],
.free-page .free-toolbar[hidden]{display:none !important}

/* ===== Hero หน้า Premium: ใช้โครงเดียวกับ Free แต่โทนทอง (ตัวแปรชุดเดียวกับเมนู Premium ใน navbar) ===== */
.t-c-premium-hero .t-c-free-badge{
  background:var(--premium-eyebrow-bg);
  color:var(--nav-premium-from);
  border-color:color-mix(in srgb,var(--nav-premium-to) 38%,transparent);
}
.t-c-premium-hero .t-c-free-hero-copy .t-c-free-title-accent{
  color:var(--nav-premium-to);
  background-image:linear-gradient(110deg,var(--nav-premium-from) 0%,var(--nav-premium-to) 45%,var(--nav-premium-from) 100%);
  background-size:220% 100%;
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
  animation:hkmPremiumShine 5s ease-in-out infinite;
}
.t-c-premium-hero .t-c-free-stats li .t-c-free-stat-n{color:var(--nav-premium-to)}
.t-c-premium-hero .t-c-free-ribbon{
  background:linear-gradient(110deg,var(--nav-premium-from) 0%,var(--nav-premium-to) 50%,var(--nav-premium-from) 100%);
  background-size:200% 100%;
  color:var(--on-color);
  box-shadow:0 8px 18px color-mix(in srgb,var(--nav-premium-from) 40%,transparent);
}

/* ===== Hero หน้าหมวดหมู่: โครงเดียวกับ Free/Premium — เด็กหญิงอ่านหนังสือ + เด็กชายโบกมือ + ฟองสบู่เครื่องหมายเลข ===== */
.t-c-cat-hero .t-c-free-badge{
  background:var(--hero-badge-bg);
  color:var(--hero-badge-text);
  border-color:var(--line);
}
.t-c-cat-girl{width:min(250px,46%);left:6%;bottom:0}
.t-c-cat-boy{width:min(250px,46%);right:4%;bottom:0;animation-delay:-2.3s}
.t-c-cat-bubble{
  position:absolute;
  display:flex;
  align-items:center;
  justify-content:center;
  width:54px;
  height:54px;
  border-radius:50%;
  font-size:30px;
  font-weight:700;
  line-height:1;
  border:3px solid var(--paper);
  box-shadow:0 8px 18px color-mix(in srgb,var(--brand) 18%,transparent);
  user-select:none;
  animation:hkmFreeFloat 4s ease-in-out infinite;
}
.t-c-cat-bubble-1{background:var(--mint);color:color-mix(in srgb,var(--mint) 35%,var(--cat-bubble-mix-1));left:2%;top:10%}
.t-c-cat-bubble-2{background:var(--yellow);color:color-mix(in srgb,var(--yellow) 30%,var(--cat-bubble-mix-2));left:38%;top:0;animation-delay:-1s}
.t-c-cat-bubble-3{background:var(--sky);color:color-mix(in srgb,var(--sky) 35%,var(--cat-bubble-mix-3));right:6%;top:8%;animation-delay:-2s}
.t-c-cat-bubble-4{background:var(--blob-yellow);color:var(--brand-dark);left:1%;bottom:16%;width:46px;height:46px;font-size:26px;animation-delay:-3s}

@media (max-width:620px){
  .t-c-cat-bubble{width:44px;height:44px;font-size:24px}
  .t-c-cat-bubble-4{width:38px;height:38px;font-size:22px}
}
@media (prefers-reduced-motion:reduce){
  .t-c-cat-bubble{animation:none}
}

/* ===== หน้า About: hero (เด็กชายหัวเราะ + เด็กหญิงกอดหนังสือ + ฟองสติกเกอร์) + การ์ดความตั้งใจ + แบนเนอร์ชวนเริ่ม ===== */
.t-c-about-hero .t-c-free-badge{background:var(--hero-badge-bg);color:var(--hero-badge-text);border-color:var(--line)}
.t-c-about-hero .t-c-free-stats li .t-c-free-stat-n{font-size:26px}
.t-c-about-boy{width:min(310px,56%);left:0;bottom:8%}
.t-c-about-girl{width:min(220px,40%);right:8%;bottom:0;animation-delay:-2.1s}
.t-c-about-bubble{font-size:26px}
.t-c-about-hero .t-c-cat-bubble-1{background:var(--skills-icon-2);left:6%;top:6%}
.t-c-about-hero .t-c-cat-bubble-2{background:var(--skills-icon-1);left:auto;right:8%;top:4%;animation-delay:-1.4s}
.t-c-about-hero .t-c-cat-bubble-3{background:var(--skills-icon-4);right:2%;top:46%;animation-delay:-2.6s}

/* ไอคอน webp (128px ย่อจากรูป 1254px แล้ว ~4-6KB) แทนอีโมจิ */
.t-c-about-ico{display:block;width:100%;height:100%;object-fit:contain;pointer-events:none;user-select:none}
.t-c-about-bubble .t-c-about-ico{width:34px;height:34px}
.t-c-about-hero .t-c-free-stat-n{display:block;width:38px;height:38px;line-height:0}
/* การ์ดไฮไลต์ที่มีแต่ข้อความ (ไม่มีไอคอน): จัดกึ่งกลางให้สูงเท่าใบอื่น */
.t-c-about-hero .t-c-free-stats li.t-c-free-stat-text{justify-content:center}
.t-c-about-hero .t-c-free-stats li.t-c-free-stat-text span{font-size:13px;font-weight:600}
.t-c-about-point-icon .t-c-about-ico{width:38px;height:38px}

.t-c-about-section{padding:56px 0 72px}
.t-c-about-intro{
  position:relative;
  overflow:hidden;
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:28px;
  padding:34px 38px;
  box-shadow:var(--shadow);
}
.t-c-about-intro::after{
  content:"✦";
  position:absolute;
  right:34px;
  bottom:-30px;
  font-size:120px;
  color:color-mix(in srgb,var(--brand) 10%,transparent);
  transform:rotate(12deg);
  pointer-events:none;
}
.t-c-about-intro .section-title{margin-top:0}
.t-c-about-intro p{margin:12px 0 0;max-width:760px;font-size:16px;line-height:1.8;color:var(--muted)}
.t-c-about-h2{margin:44px 0 0}
.t-c-about-points{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:16px;
  margin-top:18px;
}
.t-c-about-point{
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:24px;
  padding:26px 18px 22px;
  text-align:center;
  transition:transform .22s ease,box-shadow .22s ease;
}
.t-c-about-point:hover{
  transform:translateY(-4px);
  box-shadow:0 14px 26px color-mix(in srgb,var(--brand) 16%,transparent);
}
.t-c-about-point-icon{
  display:grid;
  place-items:center;
  width:60px;
  height:60px;
  margin:0 auto 14px;
  border-radius:50%;
  font-size:28px;
  border:3px solid var(--paper);
  box-shadow:0 6px 14px color-mix(in srgb,var(--brand) 14%,transparent);
}
.t-c-about-icon-1{background:var(--skills-icon-2)}
.t-c-about-icon-2{background:var(--skills-icon-3)}
.t-c-about-icon-3{background:var(--skills-icon-1)}
.t-c-about-icon-4{background:var(--skills-icon-4)}
.t-c-about-point p{margin:0;font-size:14.5px;line-height:1.65;color:var(--text)}
.t-c-about-section .info-callout{margin-top:28px}

.t-c-about-cta{
  margin-top:40px;
  padding:38px 24px 34px;
  border-radius:30px;
  text-align:center;
  background:linear-gradient(135deg,var(--cta-grad-1) 0%,var(--cta-grad-2) 55%,var(--cta-grad-3) 100%);
  border:1px solid var(--line);
}
.t-c-about-cta h2{margin:0 0 6px;font-size:clamp(24px,3.4vw,32px);color:var(--hero-title-1)}
.t-c-about-cta p{margin:0 0 22px;color:var(--hero-description);font-size:16px}
.t-c-about-cta .t-c-hero-actions{justify-content:center;margin-bottom:0}

@media (max-width:900px){
  .t-c-about-points{grid-template-columns:repeat(2,minmax(0,1fr))}
  .t-c-about-section{padding:40px 0 56px}
}
@media (max-width:520px){
  .t-c-about-points{grid-template-columns:1fr}
  .t-c-about-intro{padding:26px 22px}
}

/* ===== Animation หน้า About: แสดงตัวตอนเลื่อนถึง + ไอคอนเด้งเบา ๆ ===== */
.js-reveal .t-c-reveal{opacity:0}
.js-reveal .t-c-reveal.is-visible{
  opacity:1;
  animation:hkmReveal .65s ease var(--reveal-delay,0s) backwards;
}
@keyframes hkmReveal{
  from{opacity:0;transform:translateY(22px)}
  to{opacity:1;transform:none}
}
.t-c-about-point-icon .t-c-about-ico,
.t-c-about-hero .t-c-free-stat-n .t-c-about-ico{animation:benefitBounce 2.8s ease-in-out infinite}
.t-c-about-point:nth-child(2) .t-c-about-ico{animation-delay:.25s}
.t-c-about-point:nth-child(3) .t-c-about-ico{animation-delay:.5s}
.t-c-about-point:nth-child(4) .t-c-about-ico{animation-delay:.75s}
.t-c-about-hero .t-c-free-stats li:nth-child(2) .t-c-about-ico{animation-delay:.3s}
.t-c-about-hero .t-c-free-stats li:nth-child(3) .t-c-about-ico{animation-delay:.6s}

/* ===== นโยบายและเงื่อนไข (แผงพับ) ===== */
.t-c-legal-section{padding:0 0 84px}
.t-c-legal-section .section-title{margin:0 0 18px}
.t-c-legal{
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:22px;
  margin-bottom:14px;
  overflow:hidden;
  scroll-margin-top:90px;
  transition:box-shadow .25s ease,border-color .25s ease;
}
.t-c-legal[open]{
  box-shadow:var(--shadow);
  border-color:color-mix(in srgb,var(--brand) 38%,var(--line));
}
.t-c-legal summary{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:18px 22px;
  cursor:pointer;
  list-style:none;
  font-size:17px;
  font-weight:600;
  color:var(--hero-title-1);
  transition:background .2s ease;
}
.t-c-legal summary::-webkit-details-marker{display:none}
.t-c-legal summary:hover{background:color-mix(in srgb,var(--brand) 7%,transparent)}
.t-c-legal summary::after{
  content:"";
  flex:0 0 auto;
  width:10px;
  height:10px;
  border-right:2.5px solid var(--brand);
  border-bottom:2.5px solid var(--brand);
  transform:rotate(45deg) translateY(-2px);
  transition:transform .28s ease;
}
.t-c-legal[open] summary::after{transform:rotate(-135deg) translateY(-2px)}
.t-c-legal-body{padding:2px 24px 24px}
.t-c-legal[open] .t-c-legal-body{animation:hkmLegalOpen .38s ease}
@keyframes hkmLegalOpen{
  from{opacity:0;transform:translateY(-8px)}
  to{opacity:1;transform:none}
}
.t-c-legal-body .t-c-legal-lead{margin:0 0 6px;color:var(--muted);font-size:14.5px;line-height:1.7}
.t-c-legal-body h3{margin:18px 0 6px;font-size:16px;color:var(--hero-title-1)}
.t-c-legal-body p{margin:0 0 8px;font-size:14.5px;line-height:1.8;color:var(--text)}
.t-c-legal-body .t-c-legal-note{margin-top:16px;font-size:12.5px;color:var(--muted)}

@media (prefers-reduced-motion:reduce){
  .js-reveal .t-c-reveal.is-visible{animation:none}
  .t-c-about-point-icon .t-c-about-ico,
  .t-c-about-hero .t-c-free-stat-n .t-c-about-ico{animation:none}
  .t-c-legal[open] .t-c-legal-body{animation:none}
}

@keyframes hkmFreeFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
@keyframes hkmFreeWobble{0%,100%{transform:rotate(8deg)}50%{transform:rotate(3deg) scale(1.04)}}
@keyframes hkmFreeTwinkle{0%,100%{opacity:.95;transform:scale(1)}50%{opacity:.55;transform:scale(.82)}}

@media (max-width:900px){
  .t-c-free-hero{padding:40px 0 36px}
  .t-c-free-hero-inner{grid-template-columns:1fr;gap:20px}
  .t-c-free-hero-art{min-height:280px;max-width:420px;width:100%;margin:0 auto;position:relative;z-index:1}

  /* Hero หน้าหมวดหมู่บนมือถือ: จัดข้อความกึ่งกลาง — ตัวละคร (.t-c-free-hero-art) มาทีหลังใน DOM
     อยู่แล้ว (แสดงด้านล่างข้อความ ไม่ทับ) ใส่ z-index ให้ข้อความไว้กันเหนียวเผื่อโดนของตกแต่งบัง */
  .t-c-cat-hero .t-c-free-hero-copy{position:relative;z-index:2;text-align:center}
  .t-c-cat-hero .t-c-free-stats{justify-content:center}
  .t-c-cat-hero .t-c-hero-actions{justify-content:center}

  /* Hero หน้าเกี่ยวกับเราบนมือถือ: จัดกึ่งกลางแบบเดียวกับหน้าหมวดหมู่ */
  .t-c-about-hero .t-c-free-hero-copy{position:relative;z-index:2;text-align:center}
  .t-c-about-hero .t-c-free-stats{justify-content:center}
  .t-c-about-hero .t-c-hero-actions{justify-content:center}
}
@media (max-width:620px){
  .t-c-free-hero-copy > p{font-size:15px}
  .t-c-free-stats li{min-width:88px;padding:9px 12px}
}
@media (prefers-reduced-motion:reduce){
  .t-c-premium-hero .t-c-free-title-accent{animation:none}
  .t-c-free-mascot,.t-c-free-ribbon,.t-c-free-deco{animation:none}
}
.free-page .free-toolbar{
  display:flex;
  align-items:center;
  gap:12px;
  flex-wrap:wrap;
  margin:24px 0;
}

.free-page .free-search{
  flex:1;
  min-width:250px;
  position:relative;
}

.free-page .free-search input{
  width:100%;
  height:50px;
  border:1px solid var(--line);
  border-radius:15px;
  background:var(--paper);
  padding:0 16px 0 44px;
  outline:none;
}

.free-page .free-search::before{
  content:"⌕";
  position:absolute;
  left:16px;
  top:8px;
  color:var(--search-icon);
  font-size:26px;
  pointer-events:none;
}

.free-page .free-filter{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}

.free-page .free-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:22px;
  padding-bottom:12px; /* section ถัดไป (aff) มี padding ของตัวเองอยู่แล้ว */
}

/* แท็กชุดที่ / EP / จำนวนหน้า ต้องอยู่บรรทัดเดียวในการ์ด 4 คอลัมน์ (เนื้อหากว้าง ~243px)
   วัดจริงแล้วป้าย 3 อันรวม 241–244px จึงตกบรรทัดใหม่ในบางใบ — ลดระยะขอบข้าง/ช่องไฟ/ตัวอักษรให้เหลือ ~215px
   (กรณีสุดโต่ง "ชุดที่ 10 + EP.101 - EP.110 + 10 หน้า" ที่จอ 1200px ยังพอดี)
   ป้ายอยู่ใน .tag-row (ห่อให้เลื่อนซ้าย-ขวาได้ถ้าล้น กันบรรทัดใหม่แน่นอนทุกกรณี) */
.free-page .free-grid .product-tags{gap:6px}
.free-page .free-grid .tag-row .info-pill{padding:0 8px;font-size:12.5px}

/* แถวราคา (ราคาพิเศษ + ราคาปกติขีดฆ่า): ย่อให้พอดีการ์ดแคบ ไม่ให้ราคาปกติตกบรรทัดใหม่
   (เดิม 2 ป้ายรวมกว้างกว่าการ์ด ~30px ราคาปกติเลยตกไปอยู่บรรทัดล่าง) */
.free-page .free-grid .product-price-row{flex-wrap:nowrap;gap:5px}
.free-page .free-grid .product-price-row .info-pill{white-space:nowrap}
.free-page .free-grid .product-price-row .info-pill.price-tag.special{padding:0 8px}
.free-page .free-grid .product-price-row .price-fire-amount,
.free-page .free-grid .product-price-row .price-fire-icon{font-size:13px}
.free-page .free-grid .product-price-row .info-pill.regular-strike{font-size:11px;padding:0 2px}

/* ปุ่มเกาะขอบล่างการ์ดทุกใบให้อยู่ระดับเดียวกัน (การ์ดที่มีป้ายราคาปกติขึ้นบรรทัดใหม่สูงกว่าใบอื่น) */
.free-page .free-grid .product-card{display:flex;flex-direction:column}
.free-page .free-grid .product-card .product-body{flex:1;display:flex;flex-direction:column}
.free-page .free-grid .product-card .product-actions{margin-top:auto}

/* การ์ดแคบลงเมื่อ 4 คอลัมน์ — ให้ชื่อแสดงได้ 2 บรรทัด แทนการถูกตัดเหลือบรรทัดเดียว */
.free-page .free-grid .product-title{
  display:-webkit-box;
  white-space:normal;
  -webkit-line-clamp:2;
  line-clamp:2;
  -webkit-box-orient:vertical;
  line-height:1.3;
  font-size:19px;
}

.free-page .free-empty{
  display:none;
  grid-column:1/-1;
  padding:46px 20px;
  text-align:center;
  border:1px dashed var(--empty-border);
  border-radius:22px;
  background:color-mix(in srgb, var(--paper) 68%, transparent);
  color:var(--muted);
}

.free-page .loading-card{
  min-height:420px;
  border-radius:24px;
  border:1px solid var(--line);
  background-size:220% 100%;
  animation:hkmSkeleton 1.4s linear infinite;
}

@keyframes hkmSkeleton{
  from{background-position:100% 0}
  to{background-position:-100% 0}
}

.free-page .db-note{
  margin:0 0 22px;
  padding:12px 14px;
  border-radius:14px;
  font-size:13px;
}

@media (min-width:1200px){
  .free-page .free-grid{
    grid-template-columns:repeat(4,minmax(0,1fr));
  }
}

@media (max-width:900px){
  .free-page .free-grid{
    grid-template-columns:repeat(2,1fr);
  }
}

@media (max-width:620px){
  /* คงการ์ด 2 คอลัมน์ไว้ทุกขนาดจอมือถือ (ไม่ยุบเหลือ 1 คอลัมน์) ตามที่ user ขอ "เหมือนหน้า PC" */
  .free-page .free-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:10px;
  }
  /* การ์ดแคบลงมากบนมือถือ — ลดขนาดตัวอักษร/ป้ายให้พอดีเหมือนใน 4 คอลัมน์ของจอกว้าง */
  .free-page .free-grid .product-title{font-size:15px}
  .free-page .free-grid .product-tags{gap:4px}
  .free-page .free-grid .tag-row .info-pill{padding:0 6px;font-size:11px}
  .free-page .free-grid .product-price-row .info-pill.price-tag.special{padding:0 6px}
  .free-page .free-grid .product-price-row .price-fire-amount,
  .free-page .free-grid .product-price-row .price-fire-icon{font-size:12px}
}

.category-page-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:18px;
  padding-bottom:56px;
}

.category-page-card{
  display:grid;
  grid-template-columns:auto 1fr auto;
  gap:18px;
  align-items:center;
  min-height:150px;
  padding:26px;
  border-radius:24px;
  border:1px solid color-mix(in srgb, var(--shadow-black) 6%, transparent);
  text-decoration:none;
  color:var(--text);
  transition:transform .18s ease, box-shadow .18s ease;
}

.category-page-card:hover{
  transform:translateY(-3px);
}


.category-page-icon{
  width:58px;
  height:58px;
  display:grid;
  place-items:center;
  border-radius:18px;
  background:color-mix(in srgb, var(--paper) 76%, transparent);
  font-size:31px;
}

.category-page-card h2{
  margin:0 0 5px;
  font-size:26px;
  font-weight:400;
}

.category-page-card p{
  margin:0;
  color:var(--muted);
  line-height:1.55;
}

.category-page-arrow{
  font-size:28px;
}

.info-callout{
  margin-top:26px;
  padding:16px 18px;
  border-radius:16px;
  background:var(--callout-bg);
  border:1px solid color-mix(in srgb, var(--callout-border) 55%, transparent);
  color:var(--callout-text);
}

.notfound-wrap{
  min-height:66vh;
  display:grid;
  align-items:center;
  padding:60px 0;
}

.notfound-card{
  max-width:680px;
  margin:auto;
  text-align:center;
  padding:46px 30px;
  border-radius:30px;
  background:var(--paper);
  border:1px solid var(--line);
  box-shadow:var(--shadow);
}

.notfound-number{
  font-size:88px;
  line-height:.9;
  color:var(--notfound-number);
}

.notfound-face{
  margin:18px 0 10px;
  font-size:48px;
}

.notfound-card h1{
  margin:0 0 8px;
  font-size:38px;
  font-weight:400;
}

.notfound-card p{
  color:var(--muted);
}

.notfound-actions{
  display:flex;
  justify-content:center;
  gap:10px;
  flex-wrap:wrap;
  margin-top:22px;
}

/* ===== Shared footer ===== */
.site-footer{
  margin-top:30px;
  border-top:1px solid var(--line);
  background:var(--paper);
}

.site-footer-inner{
  display:flex;
  justify-content:space-between;
  gap:30px;
  padding-top:30px;
  padding-bottom:34px;
}

.site-footer strong{
  font-size:20px;
  font-weight:400;
}

.site-footer p{
  margin:5px 0 0;
  color:var(--muted);
  font-size:14px;
}

.footer-social{
  display:flex;
  gap:10px;
  margin-top:14px;
}

.footer-social-link{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:34px;
  height:34px;
  border-radius:50%;
  background:var(--text);
  color:var(--on-color);
  transition:transform .18s ease, background .18s ease;
}

.footer-social-link:hover{
  background:var(--brand);
  transform:translateY(-2px);
}

.footer-links{
  display:flex;
  flex-wrap:wrap;
  gap:10px 18px;
  align-items:center;
  justify-content:flex-end;
}

.footer-links a{
  color:var(--soft-text);
  text-decoration:none;
}


@media (max-width:720px){

  .category-page-grid{
    grid-template-columns:1fr;
  }

  .site-footer-inner{
    flex-direction:column;
  }

  .footer-links{
    justify-content:flex-start;
  }
}

/* ===== Supabase public frontend ===== */
.taxonomy-select{
  min-width:170px;height:44px;padding:0 36px 0 13px;
  border:1px solid var(--line);border-radius:13px;background:var(--paper);color:var(--soft-text);
  font-family:"Itim",cursive;font-size:14px;outline:none;
}
.taxonomy-select:focus{border-color:color-mix(in srgb, var(--btn-primary-glow) 55%, transparent);box-shadow:0 0 0 3px color-mix(in srgb, var(--btn-primary-glow) 8%, transparent)}
.taxonomy-select:disabled{opacity:.48;cursor:not-allowed}
#categoryFilters,#freeFilters{display:flex;gap:9px;flex-wrap:wrap}
.catalog-empty.hkm-visible{display:block;grid-column:1/-1}
.product-loading,.product-error{padding:54px 20px;text-align:center;color:var(--muted)}
.product-error{border-radius:20px;background:var(--paper)}
.product-page .download{display:block;text-align:center;text-decoration:none}
.product-page .sticky a{border:0;background:var(--sticky-bg);color:var(--on-color);font-weight:400;border-radius:14px;padding:13px 18px;text-decoration:none}
.product-main-video{object-fit:contain;}
.product-video-thumb{width:100%;height:100%;display:grid;place-items:center;font-size:23px}

.taxonomy-public-grid{padding-bottom:64px}

.count-badge{
  margin-left:4px;
  font-weight:400;
  opacity:.7;
}

/* ---- Chapter tabs ---- */

.taxonomy-chapter-tabs{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  margin-bottom:28px;
}

.taxonomy-chapter-tab{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:8px 18px 8px 8px;
  border-radius:999px;
  border:2px solid transparent;
  background:var(--paper);
  box-shadow:0 8px 20px color-mix(in srgb, var(--shadow-brown) 8%, transparent);
  cursor:pointer;
  font-family:inherit;
  font-size:15px;
  font-weight:700;
  color:var(--text);
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease, background .18s ease;
}

.taxonomy-chapter-tab:hover{
  transform:translateY(-3px);
  box-shadow:0 12px 24px color-mix(in srgb, var(--shadow-brown) 14%, transparent);
}

.taxonomy-chapter-tab.active{
  background:var(--chapter-theme, #FDE8B5);
  border-color:color-mix(in srgb, var(--shadow-black) 8%, transparent);
}

.taxonomy-tab-icon{
  flex:0 0 34px;
  width:34px;
  height:34px;
  border-radius:50%;
  background:var(--chapter-theme, #FDE8B5);
  display:grid;
  place-items:center;
  font-size:17px;
  animation:taxonomy-wiggle 2.6s ease-in-out infinite;
}

.taxonomy-chapter-tab.active .taxonomy-tab-icon{background:var(--paper)}
.taxonomy-tab-icon img{width:20px;height:20px;object-fit:contain}

.taxonomy-chapter-tab:nth-child(2n) .taxonomy-tab-icon{animation-delay:.3s}
.taxonomy-chapter-tab:nth-child(3n) .taxonomy-tab-icon{animation-delay:.6s}
.taxonomy-chapter-tab:nth-child(4n) .taxonomy-tab-icon{animation-delay:.9s}

@keyframes taxonomy-wiggle{
  0%,100%{transform:rotate(-6deg)}
  50%{transform:rotate(6deg)}
}

/* ---- Selected chapter panel ---- */

.taxonomy-chapter-panel{
  position:relative;
  overflow:hidden;
  border-radius:28px;
  padding:28px;
  background:var(--paper);
  border:1px solid color-mix(in srgb, var(--shadow-black) 5%, transparent);
  box-shadow:0 14px 30px color-mix(in srgb, var(--shadow-brown) 8%, transparent);
}

.taxonomy-cloud{
  position:absolute;
  border-radius:50%;
  background:var(--chapter-theme, #FDE8B5);
  opacity:.4;
  pointer-events:none;
}

.taxonomy-cloud-left{width:130px;height:130px;left:-50px;bottom:-55px}
.taxonomy-cloud-right{width:80px;height:80px;right:10px;top:-30px}

.taxonomy-public-head{
  position:relative;
  z-index:1;
  display:flex;
  justify-content:space-between;
  align-items:center;
  flex-wrap:wrap;
  gap:16px;
  padding-bottom:18px;
  border-bottom:2px dashed color-mix(in srgb, var(--taxonomy-head-border) 14%, transparent);
}

.taxonomy-public-head-copy{
  display:flex;
  align-items:center;
  gap:16px;
}

.taxonomy-icon-box{
  flex:0 0 60px;
  width:60px;
  height:60px;
  border-radius:20px;
  background:var(--chapter-theme, #FDE8B5);
  display:grid;
  place-items:center;
  font-size:30px;
  box-shadow:inset 0 -4px 0 color-mix(in srgb, var(--shadow-black) 6%, transparent);
  animation:taxonomy-bob 3.2s ease-in-out infinite;
}

.taxonomy-icon-box img{
  width:36px;
  height:36px;
  object-fit:contain;
}

@keyframes taxonomy-bob{
  0%,100%{transform:translateY(0) rotate(-4deg)}
  50%{transform:translateY(-6px) rotate(4deg)}
}

.taxonomy-public-kicker{
  display:block;
  font-size:12px;
  font-weight:700;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--taxonomy-kicker);
}

.taxonomy-public-head h2{
  margin:2px 0 0;
  font-size:26px;
  font-weight:400;
}

.taxonomy-public-head p{margin:0;}

.taxonomy-view-all{
  flex:0 0 auto;
  padding:10px 18px;
  border-radius:999px;
  background:var(--paper);
  border:1px solid var(--line);
  color:var(--text);
  font-size:14px;
  font-weight:700;
  text-decoration:none;
  transition:transform .18s ease, background .18s ease, color .18s ease;
}

.taxonomy-view-all:hover{
  background:var(--brand);
  border-color:var(--brand);
  color:var(--on-color);
  transform:translateY(-2px);
}

.taxonomy-public-groups{
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:16px;
  padding-top:20px;
}

.taxonomy-public-group{
  padding:16px 18px;
  border-radius:20px;
  background:color-mix(in srgb, var(--paper) 70%, transparent);
  border:1px solid color-mix(in srgb, var(--shadow-black) 4%, transparent);
}

.taxonomy-public-group-title{
  display:inline-block;
  margin-bottom:10px;
  color:var(--taxonomy-group-title);
  text-decoration:none;
  font-size:17px;
  font-weight:700;
}

.taxonomy-public-skills{display:flex;flex-wrap:wrap;gap:8px}
.taxonomy-public-skills a{
  display:inline-flex;
  padding:7px 13px;
  border-radius:999px;
  background:var(--paper);
  border:1px solid color-mix(in srgb, var(--shadow-black) 8%, transparent);
  color:var(--taxonomy-skill-link);
  text-decoration:none;
  font-size:13px;
  font-weight:600;
  transition:transform .15s ease, background .15s ease, border-color .15s ease, color .15s ease;
}
.taxonomy-public-skills a:hover{
  background:var(--brand);
  border-color:var(--brand);
  color:var(--on-color);
  transform:translateY(-2px) scale(1.05);
}
.taxonomy-empty{font-size:13px}

@media (prefers-reduced-motion:reduce){
  .taxonomy-icon-box,
  .taxonomy-tab-icon{animation:none}
}

@media(max-width:720px){
  .taxonomy-select{width:100%}
  #categoryFilters,#freeFilters{display:grid;grid-template-columns:1fr;width:100%}
  .taxonomy-chapter-tabs{gap:8px}
  .taxonomy-chapter-tab{font-size:14px}
  .taxonomy-public-head{flex-direction:column;align-items:flex-start}
  .taxonomy-view-all{align-self:flex-start}
  .taxonomy-public-groups{grid-template-columns:1fr}
}

/* ===== Navbar TH / EN toggle ===== */
.lang-toggle{
  display:inline-flex;
  align-items:center;
  gap:3px;
  margin-left:2px;
  white-space:nowrap;
}

.lang-option{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:29px;
  height:32px;
  padding:0 5px;
  border-radius:8px;
  color:var(--nav-lang-text) !important;
  text-decoration:none;
  font-size:14px;
  transition:background .15s ease,color .15s ease;
}

.lang-option:hover{
  color:var(--nav-lang-text-hover) !important;
  background:color-mix(in srgb, var(--shadow-black) 3.5%, transparent);
}

.lang-option.active{
  color:var(--nav-lang-active-text) !important;
  background:var(--nav-lang-active-bg);
}

.lang-sep{
  font-size:13px;
  user-select:none;
}

/* ===== Browse by skill draggable slider ===== */
#categories .categories.skill-slider{
  display:flex;
  grid-template-columns:none;
  gap:14px;
  overflow-x:auto;
  overflow-y:hidden;
  padding:4px 2px 14px;
  scroll-snap-type:x proximity;
  scroll-behavior:smooth;
  overscroll-behavior-x:contain;
  cursor:grab;
  user-select:none;
  -webkit-user-select:none;
  scrollbar-width:none;
}

#categories .categories.skill-slider::-webkit-scrollbar{
  display:none;
}

#categories .categories.skill-slider.is-dragging{
  cursor:grabbing;
  scroll-behavior:auto;
}

.skill-slider-track{
  position:relative;
  width:90%;
  max-width:520px;
  height:4px;
  margin:20px auto 4px;
  border-radius:999px;
  background:color-mix(in srgb, var(--overlay-dark) 5%, transparent);
  overflow:hidden;
}

.skill-slider-thumb{
  position:absolute;
  top:0;
  left:0;
  height:100%;
  min-width:12%;
  border-radius:999px;
  background:var(--muted);
  opacity:.22;
}

#categories .categories.skill-slider .skill-slide{
  flex:0 0 clamp(250px, 24vw, 330px);
  min-width:250px;
  scroll-snap-align:start;
  user-select:none;
  -webkit-user-drag:none;
}

#categories .categories.skill-slider .skill-slide img{
  pointer-events:none;
}

@media(max-width:720px){
  #categories .categories.skill-slider{
    gap:12px;
    padding-right:18px;
  }

  #categories .categories.skill-slider .skill-slide{
    flex-basis:82vw;
    min-width:82vw;
  }
}

/* ===== Browse by skill — illustrated chapter cards ===== */
#categories .categories.skill-slider{
  padding-top:8px;
  padding-bottom:22px;
  gap:18px;
}

#categories .categories.skill-slider .chapter-card{
  position:relative;
  flex:0 0 250px;
  min-width:250px;
  min-height:318px;
  padding:20px 18px 26px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-start;
  overflow:hidden;
  border-radius:30px;
  background:linear-gradient(180deg,var(--paper) 0%,var(--chapter-card-bg-end) 100%);
  border:1px solid color-mix(in srgb, var(--chapter-card-border) 8%, transparent);
  box-shadow:0 14px 34px color-mix(in srgb, var(--chapter-card-shadow) 8%, transparent);
  text-align:center;
  text-decoration:none;
  color:var(--skill-slider-text);
  scroll-snap-align:start;
  transition:transform .18s ease, box-shadow .18s ease;
}

#categories .categories.skill-slider .chapter-card:hover{
  transform:translateY(-4px);
  box-shadow:0 20px 42px color-mix(in srgb, var(--chapter-card-shadow) 12%, transparent);
}

#categories .chapter-icon-box{
  position:relative;
  z-index:2;
  width:156px;
  height:126px;
  border-radius:30px;
  display:flex;
  align-items:center;
  justify-content:center;
  margin-bottom:18px;
  background:var(--chapter-theme);
}

#categories .chapter-count-badge{
  position:absolute;
  top:-6px;
  right:-6px;
  z-index:5;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:26px;
  height:26px;
  padding:0 6px;
  border-radius:999px;
  background:var(--brand, #ff8f70);
  color:var(--on-color);
  font-size:12px;
  font-weight:700;
  line-height:1;
  box-shadow:0 4px 10px color-mix(in srgb, var(--shadow-black) 18%, transparent), 0 0 0 3px var(--paper);
  animation:chapter-count-pulse 2s ease-in-out infinite;
}

@keyframes chapter-count-pulse{
  0%,100%{transform:scale(1)}
  50%{transform:scale(1.18)}
}

@media (prefers-reduced-motion:reduce){
  #categories .chapter-count-badge{animation:none}
}

#categories .chapter-icon-image{
  width:78%;
  height:78%;
  object-fit:contain;
  display:block;
  pointer-events:none;
  filter:drop-shadow(0 8px 12px color-mix(in srgb, var(--shadow-black) 8%, transparent));
}

#categories .chapter-icon-fallback{
  font-size:62px;
  line-height:1;
}

#categories .chapter-card-copy{
  position:relative;
  z-index:3;
  width:100%;
}

#categories .chapter-card-title-row{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:7px;
  flex-wrap:wrap;
}

#categories .chapter-card-title-row h3{
  margin:0;
  color:var(--chapter-card-title);
  font-size:20px;
  line-height:1.15;
  font-weight:400;
}

#categories .chapter-card-copy p{
  max-width:190px;
  margin:10px auto 0;
  color:var(--chapter-card-desc);
  font-size:15px;
  line-height:1.45;
}

#categories .chapter-cloud{
  position:absolute;
  bottom:-24px;
  width:78px;
  height:60px;
  z-index:1;
  opacity:.82;
  background:var(--chapter-theme);
  border-radius:44% 56% 48% 52% / 58% 46% 54% 42%;
  pointer-events:none;
}

#categories .chapter-cloud::before,
#categories .chapter-cloud::after{
  content:"";
  position:absolute;
  background:inherit;
  border-radius:50%;
}

#categories .chapter-cloud::before{
  width:46px;
  height:46px;
  left:2px;
  top:-16px;
}

#categories .chapter-cloud::after{
  width:38px;
  height:38px;
  right:0;
  top:-8px;
}

#categories .chapter-cloud-left{
  left:-18px;
  transform:rotate(13deg);
}

#categories .chapter-cloud-right{
  right:-20px;
  transform:rotate(-10deg) scaleX(-1);
}

@media(max-width:720px){
  /* เดิม 74vw/306px ทำให้กล่องกว้าง/สูงเกินเนื้อหาจริงมาก (เหลือพื้นที่ว่างซ้าย-ขวา-ล่างเยอะ) — คำนวณจากไอคอน 148px + ข้อความ max-width 190px แล้วเผื่อ padding ให้กล่องพอดีเนื้อหาแทน */
  #categories .categories.skill-slider .chapter-card{
    flex-basis:230px;
    min-width:230px;
    min-height:250px;
  }

  #categories .chapter-icon-box{
    width:148px;
    height:120px;
  }
}

/* ===== Chapter cards — subtle idle motion ===== */
#categories .categories.skill-slider .chapter-card{
  animation:chapterGentleFloat 5s ease-in-out infinite;
  will-change:translate;
}

#categories .categories.skill-slider .chapter-card:nth-child(2n){
  animation-delay:-1.2s;
}

#categories .categories.skill-slider .chapter-card:nth-child(3n){
  animation-delay:-2.4s;
}

#categories .categories.skill-slider .chapter-card:nth-child(4n){
  animation-delay:-3.6s;
}

@keyframes chapterGentleFloat{
  0%,100%{
    translate:0 0;
  }
  50%{
    translate:0 -3px;
  }
}

@media (prefers-reduced-motion: reduce){
  #categories .categories.skill-slider .chapter-card{
    animation:none;
  }
}

/* ===== Home — Free Worksheets section ===== */
.home-free-section{
  position:relative;
  overflow:hidden;
}

.home-free-section::before{
  content:"";
  position:absolute;
  inset:18px 0;
  z-index:-1;
}

.home-free-section .section-head{
  align-items:flex-end;
}

.home-section-link{
  font-size:15px;
  text-decoration:none;
  white-space:nowrap;
}

.home-section-link:hover{
  text-decoration:underline;
}

.home-free-grid .home-free-card{
  position:relative;
  box-shadow:0 12px 30px color-mix(in srgb, var(--home-free-shadow) 7%, transparent);
}

.home-free-grid .home-free-card::before{
  content:"FREE";
  position:absolute;
  top:12px;
  left:12px;
  z-index:5;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height:27px;
  padding:0 10px;
  border-radius:999px;
  background:color-mix(in srgb, var(--home-free-bg) 94%, transparent);
  border:1px solid color-mix(in srgb, var(--home-free-border) 26%, transparent);
  color:var(--home-free-text);
  font-size:12px;
  line-height:1;
  letter-spacing:.04em;
  box-shadow:0 4px 12px color-mix(in srgb, var(--home-free-shadow) 8%, transparent);
  pointer-events:none;
}

.home-free-grid .home-free-card .badge.free{
  display:none;
}

@media(max-width:720px){
  .home-free-section .section-head{
    align-items:flex-start;
    gap:10px;
  }

  .home-section-link{
    white-space:normal;
  }
}

/* ===== Product card title — single line ellipsis =====
   Shared by Home / Free / All Worksheets */
.product-title-link{
  display:block;
  min-width:0;
  overflow:hidden;
}

.product-title{
  display:block;
  width:100%;
  min-width:0;
  overflow:hidden;
  white-space:nowrap;
  text-overflow:ellipsis;
}

.product-body{
  min-width:0;
}

/* ===== Product detail: description now lives inside the highlights section ===== */
.product-page .product-description-card{
  margin-top:18px;
  border:none;
  border-radius:22px;
  background:var(--paper);
  box-shadow:0 10px 26px color-mix(in srgb, var(--shadow-brown-dark) 8%, transparent);
  position:relative;
  overflow:hidden;
}

.product-page .product-description-card summary{
  cursor:pointer;list-style:none;
  padding:22px 28px 22px 30px;
  font-size:24px;font-weight:400;
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  position:relative;z-index:1;
}
.product-page .product-description-card summary::-webkit-details-marker{display:none}
.product-page .product-description-card summary::after{
  content:"+";flex:0 0 auto;font-size:28px;color:var(--sky-dark);
  transition:transform .25s ease;
}
.product-page .product-description-card[open] summary::after{transform:rotate(45deg)}

.product-page .product-description-card::before{
  content:"\275D";
  position:absolute;top:4px;left:14px;
  font-size:56px;line-height:1;
  font-family:Georgia,'Times New Roman',serif;
  color:color-mix(in srgb, var(--brand) 26%, transparent);
  pointer-events:none;
}

.product-page .product-description-card p{
  margin:0;
  padding:0 28px 26px 30px;
  position:relative;z-index:1;
  color:var(--soft-text);
  font-size:16px;
  line-height:1.85;
  white-space:pre-line;
  animation:faqOpen .2s ease;
}

@media (max-width:620px){
  .product-page .product-description-card summary{
    padding:18px 20px 18px 24px;
    font-size:20px;
  }

  .product-page .product-description-card p{
    padding:0 20px 22px 24px;
    font-size:15px;
  }
}

/* ===== Product highlights (questions per page / total / paper size) ===== */
.product-page .highlights-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:16px;
}
.product-page .highlight-card{
  background:var(--paper);border:1px solid var(--line);border-radius:18px;
  padding:20px 16px;text-align:center;
  display:flex;flex-direction:column;align-items:center;gap:10px;
  transition:transform .2s ease, box-shadow .2s ease;
}
.product-page .highlight-card:hover{transform:translateY(-3px);box-shadow:0 12px 26px color-mix(in srgb, var(--shadow-brown-dark) 10%, transparent)}
.product-page .highlight-icon{
  width:56px;height:56px;display:flex;align-items:center;justify-content:center;
}
.product-page .highlight-icon img{
  width:100%;height:100%;object-fit:contain;display:block;
  animation:benefitBounce 2.6s ease-in-out infinite;
}
.product-page .highlight-card:nth-child(2) .highlight-icon img{animation-delay:.15s}
.product-page .highlight-card:nth-child(3) .highlight-icon img{animation-delay:.3s}
.product-page .stat3d-num{display:block}
.product-page .stat3d-svg{
  display:block;width:110px;height:auto;margin:0 auto;
  animation:benefitBounce 2.6s ease-in-out infinite;
}
.product-page .highlight-card:nth-child(2) .stat3d-svg{animation-delay:.15s}
.product-page .highlight-card:nth-child(3) .stat3d-svg{animation-delay:.3s}
.product-page .highlight-label{
  display:block;margin-top:-8px;font-size:12px;color:var(--muted);font-weight:600;
}

@media (max-width:620px){
  /* เดิมยุบเหลือ 1 คอลัมน์ (การ์ดเรียงยาวลงล่าง) — user ขอให้เป็นแถวเดียว 3 คอลัมน์เหมือนจอกว้าง แค่ย่อไอคอน/ตัวเลขให้พอดีจอแคบ */
  .product-page .highlights-grid{grid-template-columns:repeat(3,1fr);gap:8px}
  .product-page .highlight-card{padding:14px 6px;gap:6px}
  .product-page .highlight-icon{width:36px;height:36px}
  .product-page .stat3d-svg{width:64px}
  .product-page .highlight-label{font-size:10.5px;margin-top:-4px}
}

/* ===== Product Preview Showcase — modern animated slider ===== */
.product-page .product-showcase-section{
  margin-top:48px;
  padding-top:34px;
  border-top:1px solid color-mix(in srgb, var(--shadow-brown-dark) 10%, transparent);
}

.product-page .product-showcase-head{
  margin-bottom:20px;
}

.product-page .product-showcase-kicker{
  display:inline-flex;
  align-items:center;
  min-height:28px;
  padding:0 10px;
  border-radius:999px;
  background:var(--sky-soft);
  color:var(--sky-dark);
  font-size:12px;
  letter-spacing:.04em;
  text-transform:uppercase;
}

.product-page .product-showcase-head h2{
  margin:8px 0 4px;
  font-size:clamp(26px,3.2vw,38px);
  line-height:1.08;
  font-weight:400;
  letter-spacing:-.025em;
}

.product-page .product-showcase-head p{
  margin:0;
  color:var(--muted);
  font-size:15px;
}

.product-page .product-showcase-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(220px,1fr));
  gap:16px;
}

.product-page .product-showcase-slide{
  margin:0;
  border-radius:18px;
  background:var(--paper);
  border:1px solid var(--line);
  overflow:hidden;
  box-shadow:0 8px 20px color-mix(in srgb, var(--shadow-brown-dark) 6%, transparent);
  transition:transform .2s ease, box-shadow .2s ease;
}

.product-page .product-showcase-slide:hover{
  transform:translateY(-3px);
  box-shadow:0 14px 28px color-mix(in srgb, var(--shadow-brown-dark) 10%, transparent);
}

.product-page .product-showcase-slide img{
  width:100%;
  aspect-ratio:1/1;
  object-fit:contain;
  display:block;
  background:var(--paper);
}

.product-page .product-showcase-slide figcaption{
  text-align:center;
  font-size:12.5px;
  font-weight:700;
  color:var(--showcase-caption-text);
  background:var(--showcase-caption-bg);
  padding:8px 6px;
  border-top:0;
}

@media (prefers-reduced-motion:reduce){
  .product-page .product-showcase-slide{
    transition:none!important;
  }
}

/* ===== Product page: shared section head ===== */
.product-page .section-head{display:flex;align-items:flex-end;justify-content:space-between;gap:20px}
.product-page .section-sub{color:var(--muted);font-size:14px;margin:4px 0 0}
.product-page .section > h2{font-size:22px;margin:0 0 4px;font-weight:800}

/* ===== Parent benefits ===== */
.product-page .benefits-grid{
  display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:18px;
}
.product-page .benefit-card{
  background:var(--paper);border:1px solid var(--line);border-radius:18px;
  padding:20px 16px;text-align:center;
  transition:transform .2s ease, box-shadow .2s ease;
}
.product-page .benefit-card:hover{transform:translateY(-3px);box-shadow:0 12px 26px color-mix(in srgb, var(--shadow-brown-dark) 10%, transparent)}
.product-page .benefit-icon-group{display:flex;align-items:center;justify-content:center;gap:6px;margin:0 auto 10px}
.product-page .benefit-icon{
  width:76px;height:76px;object-fit:contain;display:block;
  animation:benefitBounce 2.6s ease-in-out infinite;
}
.product-page .benefit-card:nth-child(2) .benefit-icon{animation-delay:.15s}
.product-page .benefit-card:nth-child(3) .benefit-icon{animation-delay:.3s}
.product-page .benefit-card:nth-child(4) .benefit-icon{animation-delay:.45s}
.product-page .benefit-icon-group .benefit-icon:nth-child(2){animation-delay:.2s}
@keyframes benefitBounce{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-5px)}
}
@media (prefers-reduced-motion:reduce){
  .free-page .download-step-icon img{animation:none}
  .product-page .benefit-icon{animation:none}
  .product-page .highlight-icon img,
  .product-page .stat3d-svg{animation:none}
}
.product-page .benefit-card b{display:block;font-size:14.5px;margin-bottom:5px}
.product-page .benefit-card span{display:block;font-size:12.5px;color:var(--muted);line-height:1.5}

/* ===== Download / order steps ===== */
:is(.product-page,.free-page) .download-steps-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:18px;
}
:is(.product-page,.free-page) .download-step{
  position:relative;background:var(--paper);border:1px solid var(--line);border-radius:18px;
  padding:26px 16px 22px;text-align:center;
}
:is(.product-page,.free-page) .download-step-num{
  position:absolute;top:-14px;left:16px;width:30px;height:30px;border-radius:50%;
  background:linear-gradient(135deg,var(--coral,var(--brand)) 0%,var(--coral-dark,var(--brand-dark)) 100%);
  color:var(--on-color);font-size:13.5px;font-weight:800;border:3px solid var(--paper);
  box-shadow:0 4px 10px color-mix(in srgb, var(--step-num-shadow) 35%, transparent);
  display:flex;align-items:center;justify-content:center;
}
:is(.product-page,.free-page) .download-step-icon{display:block;margin:0 auto 10px;width:56px;height:56px}
:is(.product-page,.free-page) .download-step-icon img{
  width:100%;height:100%;object-fit:contain;display:block;
  animation:benefitBounce 2.6s ease-in-out infinite;
}
:is(.product-page,.free-page) .download-step:nth-child(2) .download-step-icon img{animation-delay:.15s}
:is(.product-page,.free-page) .download-step:nth-child(3) .download-step-icon img{animation-delay:.3s}
:is(.product-page,.free-page) .download-step b{display:block;font-size:14.5px;margin-bottom:5px}
:is(.product-page,.free-page) .download-step span:not(.download-step-num){display:block;font-size:12.5px;color:var(--muted);line-height:1.5}

/* ===== Related worksheets (horizontal drag-scroll, reuses productCard + initSkillSlider) ===== */
.product-page .related-grid{
  display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x proximity;
  scroll-behavior:smooth;scrollbar-width:none;cursor:grab;padding:18px 2px 10px;margin:0;
}
.product-page .related-grid::-webkit-scrollbar{display:none}
.product-page .related-grid.is-dragging{cursor:grabbing;scroll-behavior:auto}
.product-page .related-grid .product-card{flex:0 0 280px;scroll-snap-align:start}

/* ===== FAQ accordion ===== */
.product-page .faq-list{display:flex;flex-direction:column;gap:10px;margin-top:18px}
.product-page .faq-item{
  background:var(--paper);border:1px solid var(--line);border-radius:14px;padding:4px 18px;
}
.product-page .faq-item summary{
  cursor:pointer;padding:14px 0;font-weight:700;font-size:14.5px;
  list-style:none;display:flex;align-items:center;justify-content:space-between;gap:12px;
}
.product-page .faq-item summary::-webkit-details-marker{display:none}
.product-page .faq-item summary::after{
  content:"+";flex:0 0 auto;font-size:20px;color:var(--sky-dark);
  transition:transform .25s ease;
}
.product-page .faq-item[open] summary::after{transform:rotate(45deg)}
.product-page .faq-answer{
  overflow:hidden;color:var(--muted);font-size:13.5px;line-height:1.6;
  animation:faqOpen .2s ease;
}
.product-page .faq-answer p{margin:0 0 14px}
@keyframes faqOpen{
  from{opacity:0;transform:translateY(-4px)}
  to{opacity:1;transform:translateY(0)}
}

@media (max-width:820px){
  .product-page .benefits-grid{grid-template-columns:repeat(2,1fr)}
  :is(.product-page,.free-page) .download-steps-grid{grid-template-columns:1fr}
}

/* =====
   Mascot decorations — pure CSS, each nested inside its own section.
   Pushed ~85% outside that section's box (into the margin outside .shell) and
   given z-index:-1 so they sit behind all real content. On narrow screens
   there's no margin left to spill into, so they naturally slide off-screen —
   overflow-x:hidden on body (see below) keeps that from causing a scrollbar.
===== */
.product-page{overflow-x:hidden}
.product-page .hero-mascot{
  position:absolute;bottom:-18px;left:-163px;width:192px;height:auto;z-index:-1;
  pointer-events:none;animation:mascotFloat 3.6s ease-in-out infinite;
}
.product-page .hero-mascot-note{
  position:absolute;bottom:145px;left:-10px;z-index:-1;max-width:150px;
  font-family:'Itim','Segoe UI',sans-serif;font-size:13.5px;line-height:1.4;
  color:var(--coral-dark);background:var(--paper);border-radius:16px 16px 16px 4px;
  padding:9px 13px;box-shadow:0 6px 16px color-mix(in srgb, var(--shadow-black) 8%, transparent);pointer-events:none;
}
.product-page .info-mascot{
  position:absolute;top:-18px;right:-129px;width:152px;height:auto;z-index:-1;
  pointer-events:none;animation:mascotFloat 3.4s ease-in-out infinite;
}
.product-page .faq-section{position:relative;z-index:1}
.product-page .faq-mascot{
  position:absolute;top:-14px;right:-109px;width:128px;height:auto;z-index:-1;
  pointer-events:none;animation:mascotFloat 3.8s ease-in-out infinite;
}
@keyframes mascotFloat{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-6px)}
}
@media (prefers-reduced-motion:reduce){
  .product-page .info-mascot,
  .product-page .faq-mascot{animation:none}
}

/* ===== Doodle text decoration (exported 3D sticker-text image) ===== */
.product-page .doodle-decoration{
  position:absolute;top:-40px;right:-30px;z-index:-1;
  text-align:center;pointer-events:none;
  animation:mascotFloat 4s ease-in-out infinite;
}
.product-page .doodle-image{
  display:block;width:220px;height:auto;transform:rotate(-3deg);
}
.product-page .doodle-sparkle{position:absolute;color:var(--doodle-sparkle);font-size:16px}
.product-page .doodle-sparkle-1{top:-8px;left:-18px}
.product-page .doodle-sparkle-2{top:-4px;right:-16px}
.product-page .doodle-decoration-left{top:-20px;right:auto;left:-230px}
.product-page .doodle-decoration-left .doodle-image{transform:rotate(4deg)}

/* ===== Background blobs (CSS-drawn, no images) ===== */
.product-page .product-highlights-section,
.product-page .product-showcase-section,
.product-page .benefits-section,
.product-page .download-steps-section,
.free-page .download-steps-section,
.product-page .related-section,
.t-c-home-page .t-c-skills-section,
.t-c-home-page .t-c-free-section,
.t-c-home-page .t-c-premium-section{
  position:relative;z-index:0;overflow:visible;
}
.bg-blob{
  position:absolute;z-index:-1;pointer-events:none;opacity:.3;
  transform:rotate(var(--blob-rotate,0deg));
}
.bg-blob-pink{background:var(--blob-pink)}
.bg-blob-yellow{background:var(--blob-yellow)}
.bg-blob-mint{background:var(--blob-mint)}
.bg-blob-sky{background:var(--sky)}

.product-page .blob-top-1{width:220px;height:220px;top:6%;right:24%;border-radius:72% 28% 33% 67% / 38% 61% 39% 62%;--blob-rotate:-8deg}
.product-page .blob-top-2{width:160px;height:160px;bottom:28%;left:5%;border-radius:30% 70% 68% 32% / 65% 24% 76% 35%;--blob-rotate:14deg}
.product-page .blob-top-3{width:110px;height:110px;top:62%;left:40%;border-radius:75% 25% 40% 60% / 30% 65% 35% 70%;--blob-rotate:20deg}

.product-page .blob-benefits-1{width:180px;height:180px;top:14%;left:30%;border-radius:63% 37% 71% 29% / 33% 68% 32% 67%;--blob-rotate:10deg}
.product-page .blob-benefits-2{width:130px;height:130px;bottom:20%;right:10%;border-radius:35% 65% 22% 78% / 70% 30% 74% 26%;--blob-rotate:-16deg}

.product-page .blob-steps-1,
.free-page .blob-steps-1{width:160px;height:160px;top:22%;left:36%;border-radius:70% 30% 35% 65% / 28% 73% 27% 72%;--blob-rotate:-12deg}

.product-page .blob-related-1{width:150px;height:150px;bottom:18%;right:26%;border-radius:29% 71% 74% 26% / 66% 27% 73% 34%;--blob-rotate:18deg}

.product-page .blob-faq-1{width:170px;height:170px;top:12%;left:22%;border-radius:60% 40% 27% 73% / 73% 25% 66% 34%;--blob-rotate:-6deg}

.product-page .blob-description-1{width:140px;height:140px;top:28%;right:14%;border-radius:68% 32% 64% 36% / 32% 69% 31% 68%;--blob-rotate:9deg}

.t-c-home-page .blob-skills-1{width:190px;height:190px;top:8%;right:26%;border-radius:64% 36% 24% 76% / 38% 26% 74% 62%;--blob-rotate:-10deg}
.t-c-home-page .blob-free-1{width:160px;height:160px;bottom:20%;left:8%;border-radius:32% 68% 76% 24% / 63% 37% 63% 37%;--blob-rotate:15deg}
.t-c-home-page .blob-premium-1{width:180px;height:180px;top:14%;right:12%;border-radius:70% 30% 52% 48% / 30% 71% 29% 70%;--blob-rotate:-18deg}
.t-c-home-page .blob-premium-2{width:120px;height:120px;bottom:16%;left:34%;border-radius:34% 66% 69% 31% / 71% 26% 74% 29%;--blob-rotate:22deg}

@media (max-width:820px){
  .bg-blob{transform:rotate(var(--blob-rotate,0deg)) scale(.7)}
}

/* =========================
   MESSENGER CONFIRM MODAL
========================= */

.hkm-modal-overlay{
  position:fixed;
  inset:0;
  z-index:200;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:20px;
  background:color-mix(in srgb, var(--overlay-dark) 45%, transparent);
  backdrop-filter:blur(2px);
}

.hkm-modal-overlay[hidden]{
  display:none;
}

.hkm-modal{
  width:min(420px,100%);
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow);
  padding:28px 26px;
  text-align:center;
}

.hkm-modal h3{
  color:var(--h2-color);
  margin:0 0 12px;
  font-size:22px;
}

.hkm-modal p{
  margin:0 0 22px;
  color:var(--muted);
  font-size:15px;
  line-height:1.6;
}

.hkm-modal-actions{
  display:flex;
  gap:10px;
}

.hkm-modal-actions .btn{
  flex:1;
}

/* =========================================================
   THEME — HappyKidMath visual design (merged from test-home.css, เดิมไฟล์ประวัติศาสตร์)
   Applies to every page via body.t-c-home-page
========================================================= */

body.t-c-home-page{
  font-family:"Itim","Mitr",sans-serif;
}

.t-c-banner{
  text-align:center;
  font-size:13px;
  font-weight:600;
  padding:9px 12px;
}

/* ---- Nav ---- */

.t-c-nav{
  background:var(--nav-bg);
  padding:14px 0;
  border-bottom:1px solid var(--nav-border);
}

.t-c-nav-inner{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  row-gap:8px;
  gap:28px;
  min-height:40px;
}

.t-c-brand{
  display:flex;
  align-items:center;
  gap:8px;
  flex:0 0 auto;
}

.t-c-brand-name{
  font-size:19px;
  font-weight:700;
  color:var(--nav-brand-name);
}

.t-c-brand-name b{color:var(--nav-logo-accent);font-weight:700}

.t-c-brand-logo{
  width:56px;
  height:56px;
  object-fit:contain;
  flex:0 0 auto;
}

.t-c-nav-links{
  display:flex;
  gap:6px;
  margin-left:auto;
  align-items:center;
}

.t-c-nav-links a{
  padding:9px 16px;
  border-radius:999px;
  color:var(--nav-link);
  font-size:14px;
  font-weight:500;
  transition:.18s ease;
}

.t-c-nav-links a:hover{color:var(--nav-link-hover)}

/* Etsy ในเมนูแฮมเบอร์เกอร์ (มือถือเท่านั้น) — บน desktop ใช้ปุ่ม .t-c-btn-order แยกอยู่แล้ว ซ่อนตัวนี้ไว้กันซ้ำ */
.t-c-nav-etsy-mobile{
  display:none;
  background:linear-gradient(180deg,var(--nav-order-from) 0%,var(--nav-order-to) 100%);
  color:var(--on-color);
  text-align:center;
  font-weight:600;
  margin-top:6px;
}
.t-c-nav-etsy-mobile:hover{color:var(--on-color)}

.t-c-nav-links a.active{
  background:var(--nav-active-bg);
  color:var(--nav-active-text);
}

/* เมนู Premium — ตัวอักษรไล่เฉดทอง + ประกายวิบวับช้า ๆ (ขนาดตัวอักษรเท่าเมนูอื่น)
   ตัวอักษรอยู่ใน span แยก เพราะ background-clip:text จะตัดพื้นหลังทุกชั้นของ element เดียวกันให้เหลือแค่ตัวอักษร
   ทำให้พื้นหลังตอน "เลือกอยู่" (pill) ต้องอยู่ที่ <a> ไม่ใช่ที่ตัวอักษร */
.t-c-nav-premium-text{
  font-weight:600;
  color:var(--nav-premium-to);
  background-image:linear-gradient(110deg,var(--nav-premium-from) 0%,var(--nav-premium-to) 45%,var(--nav-premium-from) 100%);
  background-size:220% 100%;
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
  animation:hkmPremiumShine 5s ease-in-out infinite;
  /* เงาทองเข้มบาง ๆ ใต้ตัวอักษร ช่วยให้ขอบตัวอักษรทองสว่างยังคมบนพื้นเงิน */
  filter:drop-shadow(0 .6px .5px color-mix(in srgb, var(--nav-premium-shadow) 42%, transparent));
  transition:filter .18s ease;
}
.t-c-nav-links a.t-c-nav-premium:hover .t-c-nav-premium-text{filter:drop-shadow(0 .6px .5px color-mix(in srgb, var(--nav-premium-shadow) 42%, transparent)) brightness(1.12) saturate(1.1)}
/* ตอน "เลือกอยู่": พื้นเงิน-โลหะโปร่ง 78% + ขอบไล่เฉดทอง (เฉดเดียวกับตัวอักษร)
   ขอบวาดเป็นชั้นแยกด้วย ::before + mask (เจาะกลางออก เหลือแต่วงแหวน) เพราะพื้นเงินโปร่ง
   ถ้าใส่ขอบทองเป็น background อีกชั้น สีทองจะทะลุขึ้นมาใต้พื้นเงิน */
.t-c-nav-links a.t-c-nav-premium.active{
  position:relative;
  background:linear-gradient(135deg,
    color-mix(in srgb,var(--nav-premium-metal-light) 78%,transparent) 0%,
    color-mix(in srgb,var(--nav-premium-metal-mid) 78%,transparent) 28%,
    color-mix(in srgb,var(--nav-premium-metal-light) 78%,transparent) 52%,
    color-mix(in srgb,var(--nav-premium-metal-dark) 78%,transparent) 78%,
    color-mix(in srgb,var(--nav-premium-metal-light) 78%,transparent) 100%);
  box-shadow:inset 0 1px 0 color-mix(in srgb, var(--paper) 95%, transparent),inset 0 -1px 0 color-mix(in srgb, var(--nav-premium-ring-1) 30%, transparent),0 1px 3px color-mix(in srgb, var(--nav-premium-ring-2) 20%, transparent);
}
.t-c-nav-links a.t-c-nav-premium.active::before{
  content:"";
  position:absolute;
  inset:0;
  padding:1.5px;
  border-radius:inherit;
  background:linear-gradient(110deg,var(--nav-premium-from) 0%,var(--nav-premium-to) 45%,var(--nav-premium-from) 100%);
  background-size:220% 100%;
  -webkit-mask:linear-gradient(var(--shadow-black) 0 0) content-box,linear-gradient(var(--shadow-black) 0 0);
  -webkit-mask-composite:xor;
  mask:linear-gradient(var(--shadow-black) 0 0) content-box,linear-gradient(var(--shadow-black) 0 0);
  mask-composite:exclude;
  pointer-events:none;
  animation:hkmPremiumShine 5s ease-in-out infinite;
}
@keyframes hkmPremiumShine{
  0%,100%{background-position:0% 50%}
  50%{background-position:100% 50%}
}
@media (prefers-reduced-motion:reduce){
  .t-c-nav-premium-text,
  .t-c-nav-links a.t-c-nav-premium.active::before{animation:none}
}

.t-c-nav-actions{
  display:flex;
  align-items:center;
  gap:16px;
  margin-left:auto;
}

.t-c-lang-toggle{
  display:inline-flex;
  align-items:center;
  gap:4px;
  color:var(--nav-lang-icon);
  font-size:13px;
  white-space:nowrap;
}

.t-c-btn-order{
  background:linear-gradient(180deg,var(--nav-order-from) 0%,var(--nav-order-to) 100%);
  color:var(--on-color);
  padding:10px 18px;
  border-radius:999px;
  font-weight:600;
  font-size:14px;
  white-space:nowrap;
  transition:transform .18s ease, background .18s ease;
}

.t-c-btn-order:hover{
  background:linear-gradient(180deg,var(--nav-order-hover-from) 0%,var(--nav-order-hover-to) 100%);
  transform:translateY(-2px);
}

/* ---- Hero ---- */

.t-c-hero{
  padding:96px 0 80px;
  background:linear-gradient(135deg,var(--hero-bg-from) 0%,var(--hero-bg-to) 100%) !important;
  overflow:hidden;
}

.t-c-hero-inner{
  display:grid;
  grid-template-columns:1.1fr .9fr;
  gap:40px;
  align-items:center;
}

.t-c-hero-badge{
  display:inline-flex;
  padding:8px 14px;
  border-radius:999px;
  background:var(--hero-badge-bg);
  color:var(--hero-badge-text);
  font-size:13px;
  font-weight:600;
  margin-bottom:18px;
}

.t-c-hero-copy h1{
  font-size:clamp(36px,5vw,56px);
  line-height:1.25;
  font-weight:700;
  margin:0 0 20px;
}

#heroTitle1{color:var(--hero-title-1)}
#heroTitle3{color:var(--hero-title-3)}
.t-c-accent{color:var(--hero-title-2-accent)}

.t-c-hero-copy p{
  color:var(--hero-description);
  font-size:16px;
  line-height:1.75;
  max-width:520px;
  margin:0 0 26px;
}

.t-c-hero-actions{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:22px}

.t-c-btn-primary{
  display:inline-flex;
  align-items:center;
  gap:8px;
  background:linear-gradient(180deg,var(--btn-product-from) 0%,var(--btn-product-to) 100%);
  color:var(--btn-product-text);
  border:1px solid color-mix(in srgb, var(--btn-product-border) 42%, transparent);
  padding:14px 24px;
  border-radius:999px;
  font-weight:400;
  font-size:15px;
  box-shadow:0 10px 22px color-mix(in srgb, var(--btn-primary-glow) 24%, transparent);
  text-shadow:0 1px 2px color-mix(in srgb, var(--shadow-black) 12%, transparent);
  transition:transform .18s ease, background .18s ease, box-shadow .18s ease;
}

.t-c-btn-primary:hover{
  background:linear-gradient(180deg,var(--btn-product-from) 0%,var(--btn-product-to) 100%);
  box-shadow:0 12px 26px color-mix(in srgb, var(--btn-primary-glow) 30%, transparent);
  transform:translateY(-2px);
}

.t-c-btn-secondary{
  display:inline-flex;
  align-items:center;
  gap:8px;
  background:linear-gradient(180deg,var(--hero-btn-secondary-from) 0%,var(--hero-btn-secondary-to) 100%);
  color:var(--hero-btn-secondary-text);
  border:1px solid color-mix(in srgb, var(--hero-btn-secondary-border) 55%, transparent);
  padding:14px 22px;
  border-radius:999px;
  font-weight:400;
  font-size:15px;
  box-shadow:0 7px 16px color-mix(in srgb, var(--btn-soft-shadow) 10%, transparent);
  transition:transform .18s ease, box-shadow .18s ease;
}

.t-c-btn-secondary:hover{
  border-color:color-mix(in srgb,var(--hero-btn-secondary-border) 95%,transparent);
  box-shadow:0 9px 20px color-mix(in srgb, var(--btn-soft-shadow) 16%, transparent);
  transform:translateY(-2px);
  filter:brightness(1.03);
}

.t-c-hero-stats{
  display:flex;
  gap:20px;
  flex-wrap:wrap;
  color:var(--muted);
  font-size:14px;
  font-weight:600;
}

/* ---- Hero floating worksheet collage (built fresh, self-contained) ---- */

.hkm-hero-art{
  position:relative;
  height:520px;
  overflow:visible;
}

.hkm-hero-blob{
  position:absolute;
  border-radius:50%;
  opacity:.55;
}

.hkm-hero-blob-1{
  width:320px;
  height:320px;
  background:var(--hero-blob-1);
  right:0;
  top:0;
}

.hkm-hero-blob-2{
  width:240px;
  height:240px;
  background:var(--hero-blob-2);
  left:0;
  bottom:10px;
}

.hkm-hero-fan{
  position:relative;
  height:100%;
  display:flex;
  align-items:center;
  justify-content:center;
}

.hkm-hero-page{
  position:absolute;
  width:72%;
  max-width:340px;
  border-radius:10px;
  background:var(--paper);
}

.hkm-hero-page-1{
  transform:rotate(-8deg) translateX(-78px);
  z-index:1;
  animation:hkm-hero-bob-1 5.5s ease-in-out infinite;
}

.hkm-hero-page-2{
  transform:rotate(0deg);
  z-index:3;
  animation:hkm-hero-bob-2 6s ease-in-out infinite;
}

.hkm-hero-page-3{
  transform:rotate(8deg) translateX(78px);
  z-index:2;
  animation:hkm-hero-bob-3 5.8s ease-in-out infinite;
}

.hkm-hero-single{
  position:relative;
  z-index:2;
  display:block;
  width:100%;
  max-width:420px;
  margin:0 auto;
  animation:hkm-hero-single-bob 6s ease-in-out infinite;
}

@keyframes hkm-hero-single-bob{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-14px)}
}

.hkm-hero-deco{
  position:absolute;
  width:46px;
  height:46px;
  object-fit:contain;
  z-index:1;
  filter:drop-shadow(0 4px 8px color-mix(in srgb, var(--shadow-brown) 15%, transparent));
}

.hkm-hero-star-1{
  left:2px;
  top:40px;
  width:36px;
  height:36px;
  animation:t-c-float-bob 4.4s ease-in-out infinite;
}

.hkm-hero-star-2{
  right:2px;
  top:130px;
  width:32px;
  height:32px;
  animation:t-c-float-bob 5s ease-in-out infinite .4s;
}

.hkm-hero-heart-1{
  left:4px;
  bottom:90px;
  width:34px;
  height:34px;
  animation:t-c-float-bob 3.9s ease-in-out infinite .2s;
}

.hkm-hero-heart-2{
  right:4px;
  bottom:20px;
  width:34px;
  height:34px;
  animation:t-c-float-bob 4.6s ease-in-out infinite .6s;
}

@keyframes hkm-hero-bob-1{
  0%,100%{transform:rotate(-8deg) translateX(-78px) translateY(0)}
  50%{transform:rotate(-8deg) translateX(-78px) translateY(-8px)}
}

@keyframes hkm-hero-bob-2{
  0%,100%{transform:rotate(0deg) translateY(0)}
  50%{transform:rotate(0deg) translateY(-10px)}
}

@keyframes hkm-hero-bob-3{
  0%,100%{transform:rotate(8deg) translateX(78px) translateY(0)}
  50%{transform:rotate(8deg) translateX(78px) translateY(-8px)}
}

@keyframes t-c-float-bob{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-10px)}
}

.t-c-hero-chip{
  position:absolute;
  z-index:2;
  padding:8px 14px;
  border-radius:999px;
  background:var(--paper);
  box-shadow:0 10px 20px color-mix(in srgb, var(--shadow-brown) 14%, transparent);
  font-size:13px;
  font-weight:700;
}

.t-c-hero-chip-new{top:0;right:8%}
.t-c-hero-chip-safe{bottom:20px;left:0}

/* ---- Skills band ---- */

.t-c-skills-section{
  background:linear-gradient(135deg,var(--skills-bg-from),var(--skills-bg-to));
  padding:56px 0;
}

/* ---- Section eyebrows ---- */

.t-c-eyebrow{
  display:inline-flex;
  padding:6px 12px;
  border-radius:999px;
  font-size:12px;
  font-weight:700;
  margin-bottom:10px;
}

.t-c-eyebrow-mint{background:var(--eyebrow-mint-bg);color:var(--eyebrow-mint-text)}
.t-c-eyebrow-brand{background:var(--premium-eyebrow-bg);color:var(--brand-dark)}

.t-c-view-more{
  color:var(--brand-dark);
  font-weight:700;
  font-size:14px;
  white-space:nowrap;
}

.t-c-view-more:hover{text-decoration:underline}

.t-c-free-head{position:relative}

.t-c-free-text-work{
  position:absolute;
  width:200px;
  right:70px;
  bottom:34px;
  transform:rotate(-3deg);
  pointer-events:none;
  z-index:2;
}

@media (max-width:900px){
  .t-c-free-text-work{display:none}
}

.t-c-free-section,
.t-c-premium-section{padding:56px 0}

/* ---- Guides (infographic images, no heading) ---- */

.t-c-guides-section{padding:40px 0 64px}

.t-c-guides-list{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:32px;
}

.t-c-guide-img{
  display:block;
  width:100%;
  height:auto;
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow);
}

/* ---- Product cards (scoped restyle) ---- */

.t-c-home-page .product-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:22px;
}

.t-c-home-page .product-card{
  background:var(--paper);
  border-radius:24px;
  overflow:hidden;
  border:1px solid var(--line);
  box-shadow:0 10px 26px color-mix(in srgb, var(--shadow-brown) 8%, transparent);
  transition:transform .2s ease, box-shadow .2s ease;
}

.t-c-home-page .product-card:hover{
  transform:translateY(-4px);
  box-shadow:0 16px 34px color-mix(in srgb, var(--shadow-brown) 14%, transparent);
}

.t-c-home-page .media-wrap{
  position:relative;
  aspect-ratio:1/1;
  overflow:hidden;
}

.t-c-home-page .media-wrap img{width:100%;height:100%;object-fit:cover}

.t-c-home-page .badge.free{
  position:absolute;
  inset:12px auto auto 12px;
  width:auto;
  height:auto;
  padding:5px 12px;
  border-radius:999px;
  font-size:12px;
  font-weight:700;
  box-shadow:0 4px 10px color-mix(in srgb, var(--shadow-black) 8%, transparent);
}

.t-c-preview-overlay{
  position:absolute;
  inset:12px 12px auto auto;
  width:36px;
  height:36px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:999px;
  background:color-mix(in srgb, var(--paper) 85%, transparent);
  box-shadow:0 4px 10px color-mix(in srgb, var(--shadow-black) 10%, transparent);
  font-size:15px;
  text-decoration:none;
  transition:transform .18s ease, box-shadow .18s ease;
}

.t-c-preview-overlay:hover{
  transform:scale(1.08);
  box-shadow:0 6px 16px color-mix(in srgb, var(--shadow-black) 16%, transparent);
}

.t-c-home-page .product-body{padding:16px}
.t-c-home-page .product-meta{display:none}

.t-c-home-page .product-title-link{display:block;margin-bottom:10px}

.t-c-home-page .product-title{
  font-size:16px;
  font-weight:600;
  line-height:1.4;
  color:var(--text);
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}

.t-c-home-page .product-tags{margin-bottom:14px}

.t-c-home-page .info-pill{
  border-color:transparent;
  font-size:12px;
  min-height:26px;
  padding:0 10px;
}

.t-c-home-page .product-actions{
  grid-template-columns:1fr auto;
  align-items:center;
}

.t-c-home-page .btn-download,
.t-c-home-page .btn-etsy{
  border-radius:999px;
  font-weight:700;
}

.t-c-home-page .btn-etsy{background:var(--brand);color:var(--on-color)}

.t-c-product-actions{
  display:flex;
  gap:8px;
}

.t-c-btn-action-primary{
  flex:7 1 0%;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  min-height:42px;
  padding:0 10px;
  border-radius:999px;
  font-size:13px;
  font-weight:700;
  white-space:nowrap;
  text-align:center;
}

/* ---- CTA banner ---- */

.t-c-cta{
  padding:20px 0 56px;
  background:
    radial-gradient(closest-side, color-mix(in srgb, var(--paper) 55%, transparent), transparent) top right / 60% 100% no-repeat,
    linear-gradient(135deg,var(--cta-grad-1),var(--cta-grad-2) 60%,var(--cta-grad-3));
  border-top:1px solid color-mix(in srgb, var(--cta-edge) 25%, transparent);
  border-bottom:1px solid color-mix(in srgb, var(--cta-edge) 25%, transparent);
  box-shadow:0 20px 50px color-mix(in srgb, var(--cta-edge) 18%, transparent), var(--shadow);
}

.t-c-cta-card{
  position:relative;
  overflow:hidden;
  padding:52px 56px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:30px;
}

.t-c-cta-sparkle{
  position:absolute;
  color:var(--cta-sparkle);
  font-size:20px;
  opacity:.8;
  animation:t-c-cta-sparkle-pulse 2.8s ease-in-out infinite;
}

.t-c-cta-sparkle-1{top:24px;left:38%}
.t-c-cta-sparkle-2{bottom:30px;left:18%;font-size:14px;animation-delay:.6s}
.t-c-cta-sparkle-3{top:44%;left:8%;font-size:12px;animation-delay:1.2s}

@keyframes t-c-cta-sparkle-pulse{
  0%,100%{opacity:.35;transform:scale(.85)}
  50%{opacity:1;transform:scale(1.1)}
}

.t-c-cta-badge{
  display:inline-flex;
  padding:6px 13px;
  border-radius:999px;
  background:color-mix(in srgb, var(--paper) 70%, transparent);
  color:var(--brand-dark);
  font-size:13px;
  font-weight:700;
  margin-bottom:12px;
}

.t-c-cta-copy h2{font-size:30px;margin:0 0 10px;font-weight:700;line-height:1.3}
.t-c-cta-copy p{color:var(--muted);margin:0 0 24px;max-width:440px;line-height:1.7}

.t-c-cta-actions{display:flex;flex-direction:column;align-items:flex-start;gap:10px}

.t-c-cta-note{font-size:13px;color:var(--muted);font-weight:600}

.t-c-cta-cloud{
  position:absolute;
  bottom:-40px;
  width:180px;
  height:90px;
  background:var(--cta-cloud);
  border-radius:50%;
  opacity:.7;
  z-index:0;
}

.t-c-cta-cloud-left{left:-50px}
.t-c-cta-cloud-right{right:-50px}

.t-c-cta-squiggle{
  position:absolute;
  left:-30px;
  top:0;
  width:220px;
  height:160px;
  z-index:0;
  opacity:.8;
}

.t-c-cta-star{
  position:absolute;
  width:40px;
  height:40px;
  object-fit:contain;
  z-index:4;
  filter:drop-shadow(0 4px 6px color-mix(in srgb, var(--shadow-brown) 15%, transparent));
  animation:t-c-float-bob 4.2s ease-in-out infinite;
}

.t-c-cta-star-1{left:-14px;top:24px}
.t-c-cta-star-2{left:220px;top:-18px;width:28px;height:28px;animation-delay:.4s}

.t-c-cta-heart{
  position:absolute;
  width:34px;
  height:34px;
  object-fit:contain;
  right:30px;
  top:6px;
  z-index:4;
  animation:t-c-float-bob 3.8s ease-in-out infinite .5s;
}

.t-c-cta-art{
  flex:0 0 auto;
  position:relative;
  width:560px;
  height:300px;
}

.t-c-cta-art::before{
  content:"";
  position:absolute;
  inset:0;
  background:radial-gradient(closest-side, color-mix(in srgb, var(--paper) 65%, transparent), transparent 70%);
  z-index:0;
}

.t-c-cta-img{
  position:absolute;
  width:230px;
  height:230px;
  object-fit:contain;
  filter:drop-shadow(0 10px 16px color-mix(in srgb, var(--shadow-brown) 18%, transparent));
}

.t-c-cta-img-1{
  left:0;
  top:85px;
  width:210px;
  height:210px;
  transform:rotate(-10deg);
  z-index:1;
  animation:t-c-cta-bob-1 5s ease-in-out infinite;
}

.t-c-cta-img-2{
  left:175px;
  top:0;
  z-index:3;
  animation:t-c-float-bob 5.6s ease-in-out infinite .3s;
}

.t-c-cta-img-3{
  right:0;
  top:90px;
  width:210px;
  height:210px;
  transform:rotate(10deg);
  z-index:2;
  animation:t-c-cta-bob-3 5.3s ease-in-out infinite .6s;
}

@keyframes t-c-cta-bob-1{
  0%,100%{transform:rotate(-10deg) translateY(0)}
  50%{transform:rotate(-10deg) translateY(-10px)}
}

@keyframes t-c-cta-bob-3{
  0%,100%{transform:rotate(10deg) translateY(0)}
  50%{transform:rotate(10deg) translateY(-10px)}
}

/* ---- Footer ---- */

.t-c-footer{
  position:relative;
  background:var(--footer-bg);
  padding:56px 0 0;
  border-top:0;
  color:var(--muted);
}

.t-c-footer-wave{
  position:absolute;
  top:-40px;
  left:0;
  width:100%;
  height:40px;
  color:var(--footer-bg);
  display:block;
}

.t-c-footer-wave path{
  fill:currentColor;
}

.footer-deco{position:absolute;pointer-events:none;z-index:0;line-height:1}
@media (prefers-reduced-motion:reduce){
  .footer-deco-star,.footer-deco-heart{animation:none}
}
.footer-deco-star{top:26px;left:5%;font-size:26px;animation:mascotFloat 3.4s ease-in-out infinite}
.footer-deco-heart{top:22px;right:6%;font-size:30px;animation:mascotFloat 3.8s ease-in-out infinite}
.footer-deco-pencil{bottom:26px;right:7%;font-size:26px;transform:rotate(-15deg)}
.footer-deco-symbol{font-size:32px;font-weight:800;color:color-mix(in srgb, var(--text) 10%, transparent)}
.footer-deco-symbol-1{top:58%;left:2.5%}
.footer-deco-symbol-2{top:14%;left:15%}
.footer-deco-symbol-3{bottom:18%;left:9%}
.footer-deco-symbol-4{top:32%;right:17%}

.t-c-footer-inner{
  position:relative;z-index:1;
  display:grid;
  grid-template-columns:1.4fr 1fr 1fr;
  gap:30px;
  padding-bottom:36px;
}

.t-c-footer-logo-img{
  display:block;
  width:240px;
  max-width:100%;
  height:auto;
  margin-bottom:18px;
}

.t-c-footer-social{display:flex;gap:10px;flex-wrap:wrap}

.t-c-footer-social a.t-c-footer-social-full{
  display:flex;
  align-items:center;
  width:auto;
  height:38px;
  border-radius:999px;
  padding:0 16px 0 12px;
  gap:8px;
  font-size:13px;
  font-weight:700;
  background:var(--footer-fb-bg);
  border:1px solid var(--footer-fb-bg);
  color:var(--on-color);
  transition:.18s ease;
}

.t-c-footer-social a.t-c-footer-social-full:hover{
  background:var(--footer-fb-bg-hover);
  border-color:var(--footer-fb-bg-hover);
  color:var(--on-color);
}

.t-c-footer-social-messenger{
  background:linear-gradient(135deg,var(--footer-messenger-1) 0%,var(--footer-messenger-2) 55%,var(--footer-messenger-3) 100%)!important;
  border-color:transparent!important;
}
.t-c-footer-social-messenger:hover{filter:brightness(1.08)}
.t-c-footer-social-messenger img{width:18px;height:18px;border-radius:50%;display:block}

.t-c-footer-col h3{
  display:flex;align-items:center;gap:8px;
  font-size:15px;margin:0 0 14px;color:var(--text);
}
.t-c-footer-col-icon{font-size:18px}
.t-c-footer-col a{display:block;font-size:14px;margin-bottom:10px;color:var(--muted)}
.t-c-footer-col a:hover{color:var(--brand-dark)}
.t-c-footer-col-divider{border-left:1px solid var(--footer-divider);padding-left:30px}

.t-c-footer-bottom{
  position:relative;z-index:1;
  display:flex;
  justify-content:space-between;
  padding:18px 0;
  border-top:1px solid var(--footer-divider);
  font-size:13px;
  color:var(--muted);
  flex-wrap:wrap;
  gap:8px;
}

/* ---- Reduced motion ---- */

@media (prefers-reduced-motion:reduce){
  .t-c-cta-art{animation:none}
  .t-c-nav-links.is-open{animation:none}
  .t-c-nav-toggle span{transition:none}
}

@keyframes hkmNavDrop{
  from{opacity:0;transform:translateY(-6px)}
  to{opacity:1;transform:none}
}

/* ---- Responsive ---- */

/* เมนูมือถือ: ปุ่มแฮมเบอร์เกอร์ (ซ่อนบนจอกว้าง เปิดเฉพาะ ≤900px ด้านล่าง) */
.t-c-nav-toggle{
  display:none;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  gap:5px;
  width:38px;height:38px;
  padding:0;
  margin-left:auto;
  border:1px solid var(--nav-border);
  border-radius:10px;
  background:var(--nav-bg);
  cursor:pointer;
  flex:0 0 auto;
}
.t-c-nav-toggle span{
  display:block;
  width:18px;height:2px;
  border-radius:2px;
  background:var(--nav-link);
  transition:transform .22s ease,opacity .22s ease;
}
.t-c-nav-toggle.is-open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.t-c-nav-toggle.is-open span:nth-child(2){opacity:0}
.t-c-nav-toggle.is-open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

@media (max-width:900px){
  .t-c-nav-toggle{display:flex}

  /* TH/EN ย้ายไปอยู่ข้างปุ่มแฮมเบอร์เกอร์ (ลำดับ DOM: brand → toggle → nav-links(ซ่อน) → lang-toggle → nav-actions(ซ่อน)
     พอ nav-links ไม่กินพื้นที่ตอนปิดอยู่ lang-toggle เลยมาต่อจากปุ่มแฮมเบอร์เกอร์ในแถวเดียวกันเอง ไม่ต้องใช้ order),
     เอาลูกโลกออกแล้ว (ตัด markup ทิ้งใน renderNavbar), Etsy ย้ายเข้าไปเป็นรายการสุดท้ายในเมนูแฮมเบอร์เกอร์แทนปุ่มลอยเดิม */
  .t-c-nav-actions{display:none}
  .t-c-nav-etsy-mobile{display:block}

  /* ปิดไว้เป็นค่าเริ่มต้น เปิดเมื่อ JS ใส่ .is-open (คลิกปุ่มแฮมเบอร์เกอร์) — ลิงก์ครบเหมือนบน PC ทุกอัน */
  .t-c-nav-links{display:none}
  .t-c-nav-links.is-open{
    display:flex;
    flex:1 1 100%;
    flex-direction:column;
    align-items:stretch;
    gap:4px;
    margin-top:6px;
    padding-top:10px;
    border-top:1px solid var(--nav-border);
    animation:hkmNavDrop .2s ease;
  }
  .t-c-nav-links.is-open a{
    padding:12px 16px;
    border-radius:12px;
  }
  .t-c-nav-links.is-open a.t-c-nav-premium{padding:12px 16px}

  .t-c-hero-inner{grid-template-columns:1fr}

  /* Hero มือถือ: ทุกอย่างจัดกึ่งกลาง + รูปเล็กลง (เดิมชิดซ้าย + รูปเต็มความกว้างคอลัมน์จนดูใหญ่/เกะกะ) */
  .t-c-hero-copy{text-align:center}
  .t-c-hero-actions{justify-content:center}
  /* 240px กันพอดีกับความสูงจริงของรูปที่ width:190px (rasio รูป 1122x1402 → สูง ~238px) ไม่ให้ล้นออกนอกกรอบ */
  .hkm-hero-art{height:240px;margin-top:8px}
  .hkm-hero-single{max-width:190px}
  .hkm-hero-blob-1{width:190px;height:190px}
  .hkm-hero-blob-2{width:140px;height:140px}

  .t-c-home-page .product-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .t-c-footer-inner{grid-template-columns:1fr 1fr}
}

@media (max-width:560px){
  /* คงการ์ด 2 คอลัมน์ไว้ทุกขนาดจอมือถือ (ไม่ยุบเหลือ 1 คอลัมน์) ตามที่ user ขอ "เหมือนหน้า PC" */
  .t-c-home-page .product-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .t-c-home-page .product-title{font-size:14px}
  /* แถวบนสุด (โลโก้+ปุ่ม) เต็มความกว้าง 1 แถว ใต้ลงมาแบ่ง 2 คอลัมน์ (แบบฝึกหัด | รู้จัก HappyKidMath) แทนการเรียงต่อกันยาวลงล่าง */
  .t-c-footer-inner{grid-template-columns:1fr 1fr;gap:22px 16px}
  .t-c-footer-brand{grid-column:1 / -1}
  /* โลโก้+ปุ่ม Facebook/Messenger เดิมชิดซ้ายเป็นแถวเดียว เหลือช่องว่างขวาเยอะดูเอียง — จัดกึ่งกลางให้เข้าธีมเดียวกับ Hero/section อื่นบนมือถือ */
  .t-c-footer-brand{text-align:center}
  .t-c-footer-logo-img{margin-left:auto;margin-right:auto}
  .t-c-footer-social{justify-content:center}
  .t-c-footer-col-divider{border-left:1px solid var(--footer-divider);padding-left:16px}
  .footer-deco-symbol,.footer-deco-pencil{display:none}
  .t-c-cta-card{flex-direction:column;text-align:center;padding:36px 26px}
  .t-c-cta-actions{align-items:center}
  /* .t-c-cta-art กว้าง 560px ตายตัว (ทำไว้สำหรับ desktop) พอมาเรียงคอลัมน์บนมือถือ กว้างเกินการ์ดมาก ถูก overflow:hidden ตัดขอบภาพซ้าย-ขวาห้วน ๆ —
     ย่อด้วย transform:scale ทั้งกลุ่ม (ภาพ+ตำแหน่งสัมพัทธ์คงเดิมทุกจุด) แล้วหักพื้นที่ที่หายไปด้วย margin ติดลบเท่ากัน ไม่ให้เหลือช่องว่างเกิน */
  .t-c-cta-art{transform:scale(.5);margin:-75px -140px}
}

/* ---- Product card content ---- */

.t-c-product-meta{
  font-size:12.5px;
  font-weight:600;
  letter-spacing:.01em;
  color:var(--muted);
}

.t-c-product-tags{
  display:flex;
  flex-direction:column;
  gap:8px;
  margin:0 0 14px;
}

/* แถวป้ายบท/จำนวนหน้า: บังคับแถวเดียวเสมอ ถ้าล้นให้เลื่อนซ้าย-ขวาแทนการขึ้นบรรทัดใหม่ (ซ่อน scrollbar) */
.t-c-tag-row{
  display:flex;
  flex-wrap:nowrap;
  flex-shrink:0;
  gap:8px;
  overflow-x:auto;
  scrollbar-width:none;
  -ms-overflow-style:none;
}

.t-c-tag-row::-webkit-scrollbar{display:none}

.t-c-tag-row .t-c-tag{flex:0 0 auto}

.t-c-product-divider{
  width:90%;
  margin:0 auto 14px;
  border-top:1px solid var(--line);
}

.t-c-tag{
  display:inline-flex;
  align-items:center;
  gap:6px;
  min-height:30px;
  padding:0 12px;
  border-radius:999px;
  background:var(--tag-bg);
  color:var(--accent-text);
  font-size:12.5px;
  font-weight:600;
  white-space:nowrap;
}

.t-c-tag-icon{
  width:16px;
  height:16px;
  object-fit:contain;
}

.t-c-tag-emoji{
  font-size:13px;
  line-height:1;
}

/* ---- Sponsored products (Shopee / Lazada) ---- */

.t-c-sponsored-section{padding:56px 0}

.sponsored-layout{
  display:grid;
  grid-template-columns:30% 70%;
  gap:0;
  align-items:stretch;
  border-radius:36px;
  overflow:hidden;
  box-shadow:var(--shadow);
}

.sponsored-intro{
  position:relative;
  padding:44px 30px;
  background-size:cover;
  background-position:center;
  display:flex;
  flex-direction:column;
  justify-content:center;
}

.sponsored-intro-title{
  position:relative;
  margin:0 0 18px;
  font-size:32px;
  font-weight:700;
  color:var(--sponsored-title);
}

.sponsored-accent{color:var(--brand)}

.sponsored-sparkle{
  display:inline-block;
  color:var(--sponsored-sparkle);
  font-size:22px;
  animation:sponsored-sparkle-pulse 2s ease-in-out infinite;
}

.sponsored-sparkle:last-child{animation-delay:.5s}

@keyframes sponsored-sparkle-pulse{
  0%,100%{opacity:.5;transform:scale(.85)}
  50%{opacity:1;transform:scale(1.1)}
}

.sponsored-platforms{
  display:inline-flex;
  align-items:center;
  gap:12px;
  padding:10px 18px;
  margin-bottom:18px;
  background:var(--paper);
  border-radius:999px;
  box-shadow:0 8px 20px color-mix(in srgb, var(--shadow-brown) 10%, transparent);
  width:fit-content;
}

.sponsored-platform-mark{
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-size:14px;
  font-weight:700;
}

.sponsored-platform-mark-shopee{color:var(--brand-shopee)}
.sponsored-platform-mark-lazada{color:var(--brand-lazada)}

.sponsored-platform-sep{
  width:1px;
  height:16px;
  background:var(--line);
}

.sponsored-intro-sub{
  margin:0 0 18px;
  color:var(--sponsored-sub);
  font-size:15px;
  line-height:1.7;
  max-width:320px;
}

.sponsored-highlights{
  list-style:none;
  margin:0 0 18px;
  padding:0;
  display:flex;
  flex-direction:column;
  gap:8px;
}

.sponsored-highlights li{
  display:flex;
  align-items:center;
  gap:8px;
  color:var(--sponsored-li);
  font-size:13px;
  font-weight:600;
  line-height:1.4;
}

.sponsored-highlights li span{
  flex:0 0 auto;
  font-size:15px;
}

.sponsored-notice{
  margin:0;
  padding:14px 16px;
  border-radius:16px;
  background:color-mix(in srgb, var(--paper) 60%, transparent);
}

.sponsored-notice-title{
  margin:0 0 10px;
  color:var(--accent-text);
  font-size:12.5px;
  font-weight:700;
}

.sponsored-notice-list{margin:0}

.sponsored-notice-list li{
  color:var(--sponsored-text-soft);
  font-size:12px;
  font-weight:500;
}

.sponsored-disclaimer{
  position:relative;
  z-index:5;
  margin:16px 0 0;
  color:var(--sponsored-text-soft);
  font-size:11.5px;
  line-height:1.6;
  text-align:center;
  opacity:.9;
}

.sponsored-slider-zone{
  position:relative;
  background:var(--sponsored-zone-bg);
  padding:32px 32px 26px;
  overflow:hidden;
}

.sponsored-cloud{
  position:absolute;
  border-radius:50%;
  background:var(--sponsored-cloud);
  opacity:.7;
  pointer-events:none;
}

.sponsored-cloud-1{width:120px;height:120px;top:-40px;right:60px}
.sponsored-cloud-2{width:70px;height:70px;top:10px;right:180px}

.sponsored-arrow{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  z-index:4;
  width:38px;
  height:38px;
  border-radius:50%;
  background:var(--paper);
  border:1px solid var(--line);
  box-shadow:0 8px 18px color-mix(in srgb, var(--shadow-brown) 14%, transparent);
  font-size:20px;
  line-height:1;
  color:var(--text);
  cursor:pointer;
  transition:transform .18s ease, background .18s ease;
}

.sponsored-arrow:hover{background:var(--brand);color:var(--on-color);transform:translateY(-50%) scale(1.08)}
.sponsored-arrow-prev{left:8px}
.sponsored-arrow-next{right:8px}

.sponsored-slider-wrap{overflow:hidden}

.sponsored-slider{
  display:flex;
  gap:18px;
  overflow-x:auto;
  scroll-snap-type:x proximity;
  scroll-behavior:smooth;
  scrollbar-width:none;
  cursor:grab;
  padding:4px 2px 10px;
}

.sponsored-slider::-webkit-scrollbar{display:none}
.sponsored-slider.is-dragging{cursor:grabbing;scroll-behavior:auto}
.sponsored-slider.is-autoplaying{scroll-snap-type:none}

.sponsored-card{
  position:relative;
  z-index:1;
  flex:0 0 280px;
  scroll-snap-align:start;
  display:block;
  background:var(--paper);
  border-radius:22px;
  overflow:hidden;
  border:1px solid var(--line);
  box-shadow:0 10px 22px color-mix(in srgb, var(--shadow-brown) 8%, transparent);
  text-decoration:none;
  color:inherit;
  transition:transform .2s ease, box-shadow .2s ease;
}

.sponsored-card:hover{
  transform:translateY(-4px);
  box-shadow:0 16px 30px color-mix(in srgb, var(--shadow-brown) 14%, transparent);
}

.sponsored-media{
  position:relative;
  aspect-ratio:1/1;
  overflow:hidden;
  background:var(--paper);
  padding:14px;
}

.sponsored-media img{
  width:100%;
  height:100%;
  object-fit:contain;
  transition:transform .3s ease;
}

.sponsored-card:hover .sponsored-media img{
  transform:scale(1.06);
}

.sponsored-ai-badge{
  position:absolute;
  top:10px;
  right:10px;
  z-index:2;
  display:inline-flex;
  align-items:center;
  gap:3px;
  padding:4px 9px;
  border-radius:999px;
  background:linear-gradient(135deg,var(--sponsored-ai-from),var(--sponsored-ai-to));
  color:var(--on-color);
  font-size:10.5px;
  font-weight:700;
  letter-spacing:.02em;
  box-shadow:0 4px 10px color-mix(in srgb, var(--sponsored-ai-to) 35%, transparent);
  animation:sponsored-ai-badge-glow 2.4s ease-in-out infinite;
}

@keyframes sponsored-ai-badge-glow{
  0%,100%{opacity:.85;transform:scale(1)}
  50%{opacity:1;transform:scale(1.06)}
}

@media (prefers-reduced-motion:reduce){
  .sponsored-ai-badge{animation:none}
}

.sponsored-body{
  padding:10px 14px 16px;
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  gap:8px;
}

.sponsored-name{
  margin:0;
  font-size:16px;
  font-weight:600;
  line-height:1.4;
  color:var(--text);
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}

.sponsored-platform-tag{
  display:inline-flex;
  align-items:center;
  gap:4px;
  padding:5px 12px;
  border-radius:999px;
  font-size:11.5px;
  font-weight:700;
  color:var(--on-color);
}

.sponsored-platform-tag-shopee{background:var(--brand-shopee)}

.sponsored-dots{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:8px;
  margin-top:14px;
}

.sponsored-dot{
  width:8px;
  height:8px;
  border-radius:50%;
  background:var(--sponsored-dot);
  border:0;
  padding:0;
  cursor:pointer;
  transition:background .18s ease, transform .18s ease;
}

.sponsored-dot.active{
  background:var(--brand);
  transform:scale(1.3);
}

@media (prefers-reduced-motion:reduce){
  .sponsored-sparkle{animation:none}
}

@media (max-width:900px){
  .sponsored-layout{grid-template-columns:1fr;border-radius:28px}
  .sponsored-intro-sub{max-width:none}
  .sponsored-intro{padding:36px 26px}
  .sponsored-slider-zone{padding:26px 20px 22px}
}