/* ══════════════════════════════════════════════════════════════════════
   การ์ดผลิตภัณฑ์แบบ "บัตรสินเชื่อ"  —  30 ต.ค. 2569
   เจ้าของสั่งลบภาพถ่ายออกจากการ์ด 3 ใบ แล้วทำให้ดูทันสมัยขึ้น

   แนวคิด: หัวการ์ดเปลี่ยนจากภาพถ่าย เป็นบัตรสินเชื่อที่ออกแบบเอง
           พื้นไล่สีเขียวมรกตของแบรนด์ + ชิปทอง + ลายเส้นโค้งจาง
           อ่านปราดเดียวรู้ว่าเป็นผลิตภัณฑ์สินเชื่อ ไม่ใช่รูปประกอบ

   ⚠️ ไฟล์นี้ต้องโหลดเป็นตัวสุดท้ายเสมอ เพราะต้องเขียนทับกฎ .shot
      ที่กระจายอยู่ใน site.css · sb-visual.css · campaign.css · web-images.css
   ทุกสีดึงจากตัวแปรกลาง ไม่มีเลขสีดิบ ถ้าเปลี่ยนชุดสีแบรนด์ การ์ดเปลี่ยนตาม
   ══════════════════════════════════════════════════════════════════════ */

.prod-grid article.card .shot.creditcard{
  position:relative;
  display:flex;
  align-items:flex-end;
  /* ความสูงคุมด้วย min-height อย่างเดียว ไม่ผูกกับความกว้าง
     เพราะข้อความวางชิดล่างแบบตายตัวแล้ว ไม่ต้องเผื่อพื้นที่ว่าง
     (เจ้าของสั่งย่อให้เล็กลง 30 ต.ค. 2569 — เดิม 189 จุด) */
  min-height:132px;
  padding:14px clamp(16px,2vw,20px) clamp(16px,2vw,20px);
  border:0;
  border-radius:0;
  overflow:hidden;
  isolation:isolate;
  /* 30 ต.ค. 2569 เจ้าของสั่งเปลี่ยนบัตรเป็นมิ้นท์อ่อน
     พื้นสว่างแล้ว ตัวหนังสือทุกตัวในบัตรต้องเปลี่ยนเป็นเขียวเข้ม */
  background-color:var(--ci-mint);
  background-image:linear-gradient(110deg,var(--ci-mint) 0%,var(--ci-mint-deep) 100%);
}

/* ลายเส้นโค้งจาง ๆ ให้ไม่เป็นสี่เหลี่ยมทึบ — วาดด้วย CSS ไม่ใช่ไฟล์ภาพ */
.prod-grid article.card .shot.creditcard::before{
  content:'';
  position:absolute;
  inset:-40% -30% auto auto;
  width:118%;
  aspect-ratio:1;
  border-radius:50%;
  background:
    radial-gradient(circle at 30% 30%,
      color-mix(in srgb,var(--white) 70%,transparent) 0%,
      color-mix(in srgb,var(--white) 26%,transparent) 42%,
      transparent 68%);
  pointer-events:none;
  z-index:0;
}

/* เส้นแสงบาง ๆ พาดเฉียง เหมือนผิวบัตรจริง */
.prod-grid article.card .shot.creditcard::after{
  content:'';
  position:absolute;
  inset:0;
  background:linear-gradient(104deg,
    transparent 38%,
    color-mix(in srgb,var(--white) 48%,transparent) 50%,
    transparent 62%);
  pointer-events:none;
  z-index:0;
}

/* ── ตราแบรนด์มุมขวาบน ── */
.prod-grid article.card .creditcard .cc-mark{
  position:absolute;
  top:14px;
  right:clamp(16px,2vw,20px);
  z-index:2;
  font-family:'IBM Plex Sans Thai','Noto Sans Thai',sans-serif;
  font-weight:700;
  font-size:15px;
  letter-spacing:.1em;
  line-height:1;
  color:color-mix(in srgb,var(--ci-deep) 34%,transparent);
}

/* ── ข้อความบนบัตร ──
   ⚠️ สองกับดักที่เจอจริง:
      1) กฎเดิมตั้ง flex:1 1 0% ให้ .shot-copy กล่องเลยยืดเต็มบัตร
         ตัวหนังสือไปเกาะขอบบนแล้วทับชิปทอง
      2) บนจอเล็กมีกฎอื่นเปลี่ยน .shot เป็น display:block
         ทำให้การจัดชิดล่างแบบ flex ไม่ทำงาน
      → เลิกพึ่งโครงยืดหยุ่น วางชิดล่างแบบตายตัว ได้ผลเท่ากันทุกจอ */
.prod-grid article.card .creditcard .shot-copy{
  position:absolute;
  z-index:2;
  left:clamp(16px,2vw,20px);
  right:clamp(16px,2vw,20px);
  bottom:clamp(16px,2vw,20px);
  width:auto;
  margin:0;
  padding:0;
  background:none;
  min-width:0;
}

.prod-grid article.card .creditcard .shot-copy .eyebrow{
  display:flex;
  align-items:center;
  gap:10px;
  margin:0 0 9px;
  /* ใช้ IBM Plex Sans Thai (มีในเครื่อง) ให้ต่างจากตัวหนังสือทั่วไปของเว็บ
     ตัวพิมพ์ใหญ่ถ่างกว้าง อ่านเป็นป้ายกำกับ ไม่ใช่เนื้อความ */
  font-family:'IBM Plex Sans Thai','Noto Sans Thai',sans-serif;
  font-size:10.5px;
  font-weight:600;
  letter-spacing:.26em;
  text-transform:uppercase;
  /* ⛔ ห้ามใส่ opacity ตรงนี้ — เคยใส่ .82 แล้วค่าความต่างสีตกเหลือ 3.74
     ถ้าอยากให้จางลง ให้ผสมสีแทน จะคุมค่าได้ */
  /* พื้นบัตรเป็นมิ้นท์อ่อนแล้ว ทองทุกเฉดอ่านไม่ออก (ได้แค่ 1.6)
     จึงใช้เขียวเข้มของแบรนด์แทน แยกจากชื่อด้วยขนาดและระยะตัวอักษร */
  color:color-mix(in srgb,var(--ci-teal) 72%,var(--ci-deep));
}
.prod-grid article.card .creditcard .shot-copy .eyebrow::before{
  content:'';
  width:26px;
  height:1.5px;
  border-radius:2px;
  background:color-mix(in srgb,var(--ci-teal) 72%,var(--ci-deep));
  flex:none;
}

.prod-grid article.card .creditcard .shot-copy h3{
  margin:0;
  color:var(--ci-deep);
  /* ชื่อสินเชื่อใช้ฟอนต์คนละตัวกับเนื้อความ ให้เป็นจุดเด่นของบัตร */
  font-family:'IBM Plex Sans Thai','Noto Sans Thai',sans-serif;
  font-size:clamp(19px,2vw,23.5px);
  font-weight:600;
  line-height:1.3;
  letter-spacing:-.018em;
  text-wrap:balance;
  text-shadow:none;
}

/* ── ขอบบนโค้งตามการ์ด ── */
.prod-grid article.card{overflow:hidden}
.prod-grid article.card .shot.creditcard{
  border-top-left-radius:inherit;
  border-top-right-radius:inherit;
}

/* ── ขยับเล็กน้อยตอนเอาเมาส์ชี้ ให้รู้ว่ากดได้ ── */
.prod-grid article.card .shot.creditcard{
  transition:transform .3s cubic-bezier(.16,1,.3,1);
}
.prod-grid article.card:hover .shot.creditcard{transform:scale(1.015)}

/* ── จอเล็ก ── */
@media(max-width:767px){
  .prod-grid article.card .shot.creditcard{min-height:118px;padding:12px 16px 16px}
  .prod-grid article.card .creditcard .cc-mark{top:12px;right:16px;font-size:15px}
  .prod-grid article.card .creditcard .shot-copy{left:16px;right:16px;bottom:14px}
  .prod-grid article.card .creditcard .shot-copy h3{font-size:20px}
}

@media(prefers-reduced-motion:reduce){
  .prod-grid article.card .shot.creditcard{transition:none}
  .prod-grid article.card:hover .shot.creditcard{transform:none}
}

/* ══════════════════════════════════════════════════════════════════════
   เนื้อในการ์ดชุดใหม่ 31 ต.ค. 2569 — ตามบรีฟของเจ้าของ
   เรียงเหมือนกันทุกใบ: ชื่อ → ความเหมาะสม → คุณสมบัติ → วงเงิน
                       → ดอกเบี้ย → รอบชำระ → คำแนะนำ → ปุ่ม
   ══════════════════════════════════════════════════════════════════════ */

.prod-grid article.card .prod-body{
  background:var(--white);
  display:flex;
  flex-direction:column;
  gap:18px;
}

/* ── คุณสมบัติประกอบการพิจารณา ──
   ⚠️ ตั้งใจใช้จุดกลมธรรมดา ไม่ใช้เครื่องหมายถูก
      เพราะเครื่องหมายถูกจะอ่านเหมือน "คุณผ่านเกณฑ์แล้ว" ซึ่งไม่จริง */
.prod-grid article.card .qual{
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  padding:16px 0;
}
.prod-grid article.card .qual-head{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:8px;
  margin:0 0 10px;
  font-family:'IBM Plex Sans Thai','Noto Sans Thai',sans-serif;
  font-size:13.5px;
  font-weight:600;
  color:var(--ci-deep);
}
.prod-grid article.card .qual-draft{
  font-size:10.5px;
  font-weight:600;
  letter-spacing:.08em;
  padding:2px 8px;
  border-radius:999px;
  background:color-mix(in srgb,var(--accent-yellow) 26%,var(--white));
  color:color-mix(in srgb,var(--accent-yellow) 42%,var(--ci-deep));
  border:1px solid color-mix(in srgb,var(--accent-yellow) 48%,transparent);
}
.prod-grid article.card .qual-list{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  gap:8px;
}
.prod-grid article.card .qual-list li{
  position:relative;
  padding-left:18px;
  font-size:14.5px;
  line-height:1.65;
  color:var(--text-secondary);
}
.prod-grid article.card .qual-list li::before{
  content:'';
  position:absolute;
  left:2px;
  top:.68em;
  width:6px;
  height:6px;
  border-radius:50%;
  background:var(--ci-accent);
}

/* ── ตัวเลข: วงเงิน / ดอกเบี้ย / รอบชำระ ── */
.prod-grid article.card .spec{margin:0}
.prod-grid article.card .spec dd .unit{
  font-weight:600;
  font-size:.92em;
  color:var(--text-secondary);
  white-space:nowrap;
}/* ── ปุ่มสองปุ่ม แบ่งครึ่งเท่ากัน ── */
.prod-grid article.card .btn-row{
  margin-top:auto;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
}
.prod-grid article.card .btn-row .btn{width:100%;padding:0 12px;text-align:center}

/* ── ข้อความกำกับใต้ชุดการ์ด ── */
.prod-disclaimer{
  margin-top:20px;
  padding:16px 18px;
  border-radius:14px;
  border:1px solid var(--line);
  background:var(--white);
  line-height:1.8;
}

@media(max-width:767px){
  .prod-grid article.card .prod-body{gap:16px}
  .prod-grid article.card .btn-row{grid-template-columns:1fr}
  .prod-grid article.card .qual-list li{font-size:15px}
}

/* ══════════════════════════════════════════════════════════════════════
   หน้า "เงื่อนไขและค่าใช้จ่าย" 3 ผลิตภัณฑ์  —  31 ต.ค. 2569
   สร้างจาก ตัวสร้างเว็บ/สร้างหน้าเงื่อนไข.py (แก้ที่นั่น ไม่ใช่แก้ html)
   ══════════════════════════════════════════════════════════════════════ */

.tm-head{padding-block:clamp(36px,6vw,64px) clamp(28px,4vw,44px);max-width:760px}
.tm-head h1{margin:10px 0 14px;line-height:1.3}
.tm-head .lead{margin:0;color:var(--text-secondary)}

.tm-sec{padding-block:clamp(26px,3.6vw,40px)}
.tm-sec > h2{
  display:flex;flex-wrap:wrap;align-items:center;gap:10px;
  font-family:'IBM Plex Sans Thai','Noto Sans Thai',sans-serif;
  font-size:clamp(20px,2.4vw,26px);margin:0 0 10px;letter-spacing:-.012em}
.tm-sec > p.muted{margin:0 0 16px;max-width:760px}

/* ── สรุปตัวเลข 3 ช่อง ── */
.tm-figures{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.tm-fig{
  background:var(--white);border:1px solid var(--line);border-radius:16px;
  padding:18px 20px;display:flex;flex-direction:column;gap:6px;min-width:0}
.tm-fig span{font-size:13.5px;color:var(--text-secondary)}
.tm-fig b{
  font-family:'IBM Plex Sans Thai','Noto Sans Thai',sans-serif;
  font-size:clamp(19px,2vw,24px);font-weight:600;color:var(--ci-deep);line-height:1.3}
.tm-fig b i{font-style:normal;font-size:.62em;font-weight:600;color:var(--text-secondary)}

/* ── ตารางเงื่อนไข ── */
.tm-table{margin:0;background:var(--white);border:1px solid var(--line);
  border-radius:16px;overflow:hidden}
.tm-row{display:grid;grid-template-columns:minmax(150px,230px) 1fr;gap:14px;
  padding:15px 20px;border-bottom:1px solid var(--line);align-items:start}
.tm-row:last-child{border-bottom:0}
.tm-row dt{margin:0;font-weight:600;color:var(--ci-deep);font-size:14.5px}
.tm-row dd{margin:0;color:var(--text-secondary);font-size:14.5px;line-height:1.7;min-width:0}

/* ── กล่อง "รอเจ้าของยืนยัน" ──
   ตั้งใจให้สะดุดตา เพราะเป็นเงื่อนไขการเงินที่ยังไม่ได้รับการยืนยัน
   ห้ามแต่งตัวเลขเองเด็ดขาด เติมค่าใน PENDING ของสคริปต์แล้วกล่องนี้จะหายไป */
.todo-field{
  display:inline-flex;flex-direction:column;gap:2px;
  padding:7px 13px;border-radius:10px;
  background:color-mix(in srgb,var(--accent-yellow) 18%,var(--white));
  border:1px dashed color-mix(in srgb,var(--accent-yellow) 62%,transparent);
  /* เข้มพอให้ผ่านเกณฑ์ค่าความต่างสี — 38% เคยได้แค่ 4.13 */
  color:color-mix(in srgb,var(--accent-yellow) 18%,var(--ci-deep));
  font-size:13.5px;font-weight:600;line-height:1.5}
.todo-field small{font-weight:400;font-size:11.5px;opacity:.85}

.tm-quals{max-width:760px}
.tm-cta{padding-bottom:clamp(30px,4vw,48px)}
.tm-btns{display:flex;flex-wrap:wrap;gap:12px;margin-top:18px}

@media(max-width:767px){
  .tm-figures{grid-template-columns:1fr}
  .tm-row{grid-template-columns:1fr;gap:6px;padding:14px 16px}
  .tm-btns .btn{width:100%}
}

/* ══════════════════════════════════════════════════════════════════════
   แถบ 3 ช่อง "เรื่องที่เจ้าของกิจการพูดถึงบ่อยที่สุด"  —  31 ต.ค. 2569
   เจ้าของสั่งให้เอาข้อความ 3 ชุดขึ้นเว็บ วางก่อนส่วนผลิตภัณฑ์

   ⚠️ ตั้งใจใช้ภาพเปล่า + วางข้อความด้วย CSS ไม่ใช่ภาพที่ฝังคำไว้
      เพราะ Google อ่านข้อความที่ฝังในภาพไม่ได้
      ไฟล์ภาพที่ฝังคำแล้วอยู่ที่ images/sb/ads/ ไว้ใช้ยิงโฆษณา
   ══════════════════════════════════════════════════════════════════════ */

.bn-band{background:var(--background);padding-block:clamp(20px,2.4vw,30px)}
.bn-title{
  font-family:'IBM Plex Sans Thai','Noto Sans Thai',sans-serif;
  font-size:clamp(22px,2.6vw,29px);font-weight:600;letter-spacing:-.015em;
  margin:4px 0 14px;color:var(--ci-deep);text-wrap:balance}

/* ── สไลด์วนอัตโนมัติ 31 ต.ค. 69 ──
   เปลี่ยนจากตะแกรง 3 ช่องนิ่ง เป็นรางเลื่อนได้
   ถ้าสคริปต์ไม่ทำงาน การ์ดจะยังเรียง 3 ใบเหมือนเดิม ไม่พัง */
.bn-band{--bn-gap:clamp(14px,1.6vw,20px)}
.bn-viewport{overflow:hidden;border-radius:var(--r-card)}
.bn-grid{display:flex;gap:var(--bn-gap);align-items:stretch}
.bn-card{flex:0 0 calc((100% - var(--bn-gap)*2)/3)}

.bn-card{
  position:relative;display:flex;flex-direction:column;justify-content:flex-end;
  min-width:0;
  /* คงความสูงไว้เท่าเดิมหลังลบลิงก์ออก ไม่ให้แถบหดลงจากที่ตั้งไว้ 40% */
  min-height:clamp(210px,24vw,250px);
  border-radius:var(--r-card);overflow:hidden;
  background:var(--ci-deep);
  box-shadow:var(--sh-card);
  isolation:isolate}

.bn-pic{display:block;position:absolute;inset:0;z-index:0}
.bn-img{width:100%;height:100%;object-fit:cover;object-position:center 38%;display:block}
/* เลื่อนจุดโฟกัสรายภาพ ให้ของสำคัญอยู่ในส่วนที่มองเห็น ไม่โดนข้อความบัง
   ช่อง 2 (ถาดใบแจ้งหนี้) ของสำคัญอยู่กลางภาพ ต้องเลื่อนลง */
.bn-card:nth-child(2) .bn-img{object-position:center 58%}

/* การ์ดเตี้ยลง 40% แล้ว ฝ้าคลุมทั้งใบคุมยาก
   เปลี่ยนเป็นพื้นทึบใต้ข้อความ + ไล่จางเหนือขอบบนของกล่องข้อความ
   ได้ผลคือตัวหนังสืออ่านออกแน่นอนทุกภาพ และภาพด้านบนคมชัดไม่โดนฝ้าบัง */
.bn-copy{background:var(--ci-paper)}
.bn-copy::before{
  content:'';position:absolute;left:0;right:0;bottom:100%;height:30px;
  pointer-events:none;
  background:linear-gradient(to top,var(--ci-paper),transparent)}

.bn-copy{
  position:relative;z-index:2;
  display:flex;flex-direction:column;gap:7px;
  padding:clamp(13px,1.4vw,15px);
  /* 31 ต.ค. 69 เจ้าของสั่งลบลิงก์ออกแล้วดันข้อความลงชิดขอบล่าง
     ใช้ margin-top:auto แทนระยะตายตัว พื้นที่ภาพด้านบนจะยืดเต็มเอง */
  margin-top:auto}

.bn-copy h3{
  margin:0;color:var(--ci-deep);
  font-family:'IBM Plex Sans Thai','Noto Sans Thai',sans-serif;
  font-size:clamp(16px,1.4vw,18.5px);font-weight:600;
  line-height:1.4;letter-spacing:-.012em;text-wrap:balance}

/* บรรทัด "แบบเดิม" ของช่องที่ 3 ทำให้จางกว่า เพื่อให้เห็นว่ากำลังเทียบ */
.bn-was{display:block;color:var(--ci-teal);font-weight:500;margin-bottom:3px}

.bn-copy p{margin:0;color:var(--text-secondary);font-size:14px;line-height:1.7}

.bn-link{
  margin-top:2px;align-self:flex-start;
  display:inline-flex;align-items:center;gap:8px;
  font-family:'IBM Plex Sans Thai','Noto Sans Thai',sans-serif;
  font-weight:600;font-size:14.5px;text-decoration:none;
  color:var(--blue-800);
  min-height:44px}
.bn-link span{transition:transform var(--ease)}
.bn-link:hover{color:var(--navy-900);text-decoration:underline;text-underline-offset:5px}
.bn-link:hover span{transform:translateX(4px)}
.bn-link:focus-visible{outline:3px solid var(--ring-color);outline-offset:3px;border-radius:6px}

@media(max-width:1100px){
  .bn-card{flex:0 0 calc((100% - var(--bn-gap))/2)}
}
@media(max-width:767px){
  .bn-band{--bn-gap:16px}
  .bn-card{flex:0 0 100%}
  .bn-card,.bn-card:last-child{min-height:clamp(230px,56vw,300px)}
  .bn-copy h3{font-size:18px}
  .bn-copy p{font-size:14.5px}
}
@media(prefers-reduced-motion:reduce){.bn-link span{transition:none}}