/* ══════════════════════════════════════════════════════════════════════
   loan.css — เฉพาะหน้าโปรแกรมสินเชื่อ (loan.html) เท่านั้น
   โหลดต่อจาก style.css · ไม่มีการแก้ style.css แม้แต่บรรทัดเดียว
   ทุกคลาสในไฟล์นี้ขึ้นต้นด้วย l- เพื่อไม่ให้ชนกับหน้าอื่น
   ══════════════════════════════════════════════════════════════════════ */

/* ── โทนสีประจำโปรแกรมสินเชื่อ (ชุดเดียวกับการ์ดในหน้าแรก) ───────────── */
body.t-loan{
  --l-main:#b45309;        /* สีหลัก */
  --l-deep:#7c3a06;        /* สีเข้ม */
  --l-warm:#c2761a;        /* สีอุ่นสำหรับลายเส้นเส้นที่สอง */
  --l-soft:#fdf1e3;        /* พื้นอ่อน */
  --l-soft-2:#fdf7f0;      /* พื้นอ่อนกว่า */
  --l-ring:#f0dcc2;        /* เส้นขอบโทนอุ่น */
}

/* ── ลายเส้นวาดมือ ──────────────────────────────────────────────────── */
.l-ink{display:block;width:100%;height:auto}
.l-ink .ln{fill:none;stroke:var(--l-main);stroke-width:2.1;
  stroke-linecap:round;stroke-linejoin:round}
.l-ink .ln-2{fill:none;stroke:var(--l-warm);stroke-width:2.1;
  stroke-linecap:round;stroke-linejoin:round}
.l-ink .ln-thin{fill:none;stroke:var(--l-main);stroke-width:1.4;
  stroke-linecap:round;stroke-linejoin:round;opacity:.5}
.l-ink .ln-dash{fill:none;stroke:var(--l-warm);stroke-width:2.1;
  stroke-linecap:round;stroke-dasharray:3 11;opacity:.85}

/* ── 1 · หัวเรื่อง ──────────────────────────────────────────────────── */
.l-hero{padding:30px 0 8px}
.l-kicker{
  display:inline-flex;align-items:center;gap:7px;
  background:var(--l-soft);color:var(--l-deep);
  border:1px solid var(--l-ring);border-radius:999px;
  padding:5px 13px;font-size:13px;font-weight:600;margin-bottom:14px;
}
.l-kicker svg{width:15px;height:15px;flex:0 0 auto}
.l-hero h1{font-size:clamp(25px,6.6vw,40px);line-height:1.3;margin:0 0 12px}
.l-hero h1 em{font-style:normal;color:var(--l-main)}
.l-lead{font-size:clamp(16px,3.6vw,18px);color:var(--ink-2);margin:0 0 18px;max-width:62ch}
.l-facts{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 22px;padding:0;list-style:none}
.l-facts li{
  display:flex;align-items:center;gap:7px;background:#fff;
  border:1px solid var(--line);border-radius:999px;
  padding:6px 13px;font-size:14px;color:var(--ink-2);
}
.l-facts svg{width:15px;height:15px;color:var(--l-warm);flex:0 0 auto}

/* ── กรอบภาพหน้าจอ ──────────────────────────────────────────────────── */
.l-shot{
  display:block;position:relative;border:1px solid var(--line);
  border-radius:var(--radius);overflow:hidden;background:#fff;
  box-shadow:var(--shadow);
}
.l-shot:hover{border-color:var(--l-main);text-decoration:none}
.l-shot img{display:block;width:100%;height:auto}
.l-cap{
  display:block;padding:9px 14px;font-size:13px;color:var(--mut);line-height:1.6;
  border-top:1px solid var(--line-2);background:#fff;
}
.l-cap b{display:block;color:var(--ink-2);font-weight:600;font-size:13.5px}
.l-zoomtag{
  position:absolute;top:9px;right:9px;display:inline-flex;align-items:center;gap:5px;
  background:rgba(28,20,10,.72);color:#fff;border-radius:999px;
  padding:4px 10px;font-size:12px;
}
.l-zoomtag svg{width:13px;height:13px}

/* ── 2 · ปัญหา → โปรแกรมช่วยยังไง ───────────────────────────────────── */
.l-rows{display:grid;gap:14px}
.l-row{
  background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  padding:16px;box-shadow:var(--shadow);
  display:grid;grid-template-columns:76px 1fr;gap:15px;align-items:center;
}
.l-row .l-pic{
  width:76px;height:76px;border-radius:14px;background:var(--l-soft);
  border:1px solid var(--l-ring);display:flex;align-items:center;justify-content:center;
}
.l-row .l-pic svg{width:48px;height:48px}
.l-row h3{margin:0 0 5px;font-size:16.5px;color:var(--ink)}
.l-row p{margin:0;font-size:15px;color:var(--ink-2);line-height:1.7}
.l-row p b{color:var(--l-deep)}

/* ── 3 · ฟีเจอร์เด่น ────────────────────────────────────────────────── */
.l-list{margin:0;padding:0;list-style:none;display:grid;gap:9px}
.l-list li{position:relative;padding-left:24px;font-size:15px;color:var(--ink-2);line-height:1.7}
.l-list li::before{
  content:"";position:absolute;left:2px;top:.65em;width:9px;height:9px;
  border:2px solid var(--l-warm);border-top:0;border-right:0;
  transform:rotate(-45deg);border-radius:1px;
}
.l-top{
  background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  padding:20px 18px;box-shadow:var(--shadow);
}

/* ── 4 · หมวดความสามารถ ─────────────────────────────────────────────── */
.l-groups{display:grid;gap:16px}
.l-group{
  background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  padding:18px;box-shadow:var(--shadow);
}
.l-group .l-ic{
  width:46px;height:46px;border-radius:12px;background:var(--l-soft);
  border:1px solid var(--l-ring);display:flex;align-items:center;justify-content:center;
  margin-bottom:12px;
}
.l-group .l-ic svg{width:26px;height:26px}
.l-group h3{margin:0 0 8px;font-size:17px}
.l-group > p{margin:0 0 12px;color:var(--ink-2);font-size:15px}
.l-group .l-shot{margin-top:14px}

/* ── 5 · ใช้ได้ทั้งกิจการ ───────────────────────────────────────────── */
.l-lan{background:var(--l-soft-2);border-top:1px solid var(--l-ring);border-bottom:1px solid var(--l-ring)}
.l-art{
  background:#fff;border:1px solid var(--l-ring);border-radius:var(--radius);
  padding:14px 12px;box-shadow:var(--shadow);
}
.l-art svg{display:block;width:100%;height:auto}
.l-legend{display:grid;gap:10px;margin-top:12px}
.l-legend div{
  background:#fff;border:1px solid var(--line);border-radius:12px;
  padding:13px 15px;font-size:14.5px;line-height:1.7;color:var(--ink-2);
}
.l-legend b{display:block;color:var(--l-deep);font-size:15.5px;margin-bottom:2px}
.l-lan-grid{display:grid;gap:18px;margin-top:18px}
.l-phones{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.l-phone{
  display:block;border:1px solid var(--line);border-radius:18px;overflow:hidden;
  background:#fff;box-shadow:var(--shadow);
}
.l-phone:hover{border-color:var(--l-main)}
.l-phone img{display:block;width:100%;height:auto}

/* ── 6 · กล่องราคา ──────────────────────────────────────────────────── */
.l-price-box{
  background:linear-gradient(150deg,var(--l-main),var(--l-deep));
  color:#fff;border-radius:var(--radius);padding:26px 20px;text-align:center;
  box-shadow:0 18px 34px -22px rgba(124,58,6,.85);
}
.l-price-kicker{margin:0;font-size:15px;opacity:.9}
.l-amt{font-size:clamp(46px,13vw,72px);font-weight:700;line-height:1.05;margin:2px 0 4px}
.l-amt small{font-size:.34em;font-weight:400;opacity:.9;margin-left:8px}
.l-price-lines{
  margin:16px auto 0;padding:0;list-style:none;max-width:44ch;
  display:grid;gap:9px;text-align:left;
}
.l-price-lines li{position:relative;padding-left:26px;font-size:15.5px;line-height:1.65}
.l-price-lines li::before{
  content:"";position:absolute;left:3px;top:.6em;width:10px;height:10px;
  border:2.2px solid #fff;border-top:0;border-right:0;
  transform:rotate(-45deg);border-radius:1px;opacity:.9;
}
.l-price-lines li:nth-child(2){font-weight:600}
.l-price-btns{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-top:20px}
.l-price-btns a{
  background:#fff;color:var(--l-deep);border-radius:10px;
  padding:12px 22px;font-weight:600;font-size:15.5px;
  display:inline-flex;align-items:center;gap:8px;
}
.l-price-btns a:hover{text-decoration:none;background:#fff8f0}
.l-price-btns svg{width:17px;height:17px}
.l-price-note{margin:16px auto 0;max-width:52ch;font-size:13.5px;line-height:1.7;opacity:.85}

/* ── เอกสารที่พิมพ์ได้ ───────────────────────────────────────────────── */
.l-docs{display:grid;gap:16px;grid-template-columns:1fr;margin-top:6px}
.l-doc{
  display:block;background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  padding:12px;box-shadow:var(--shadow);
}
.l-doc:hover{border-color:var(--l-main);text-decoration:none}
.l-doc img{
  display:block;width:100%;height:auto;border-radius:8px;
  border:1px solid var(--line-2);background:#fff;
}
.l-doc-name{display:block;margin:10px 2px 2px;font-size:15px;font-weight:600;color:var(--ink)}
.l-doc-cap{display:block;margin:0 2px;font-size:12.5px;color:var(--mut)}
.l-doc-tall img{max-height:520px;object-fit:cover;object-position:top}
@media (min-width:760px){
  .l-docs{grid-template-columns:1fr 1fr}
  .l-docs .l-doc-wide{grid-column:1 / -1}
}

/* ── 7 · ถามตอบ ─────────────────────────────────────────────────────── */
.l-faq{display:grid;gap:9px}
.l-faq details{
  background:#fff;border:1px solid var(--line);border-radius:12px;
  padding:0 15px;box-shadow:var(--shadow);
}
.l-faq summary{
  cursor:pointer;list-style:none;padding:14px 26px 14px 0;position:relative;
  font-weight:600;font-size:15.5px;color:var(--ink);
}
.l-faq summary::-webkit-details-marker{display:none}
.l-faq summary::after{
  content:"";position:absolute;right:4px;top:50%;width:9px;height:9px;
  border-right:2px solid var(--l-main);border-bottom:2px solid var(--l-main);
  transform:translateY(-70%) rotate(45deg);transition:transform .18s ease;
}
.l-faq details[open] summary::after{transform:translateY(-25%) rotate(-135deg)}
.l-faq details p{margin:0 0 15px;font-size:15px;color:var(--ink-2);line-height:1.75}
.l-faq details p:first-of-type{margin-top:-2px}

.l-fine{font-size:13.5px;color:var(--mut);margin:14px 0 0;line-height:1.75}

/* ── กล่องขยายภาพ — CSS ล้วน ไม่มี JavaScript ──────────────────────── */
.l-zoom{
  position:fixed;inset:0;z-index:80;display:none;
  background:rgba(26,16,6,.86);padding:20px;
  align-items:center;justify-content:center;
}
.l-zoom:target{display:flex}
.l-zoom img{max-width:100%;max-height:92vh;width:auto;height:auto;
  border-radius:10px;box-shadow:0 24px 60px -20px rgba(0,0,0,.7)}
.l-zoom .l-close{position:absolute;inset:0;display:block}
.l-zoom .l-x{
  position:absolute;top:14px;right:16px;z-index:2;width:40px;height:40px;
  border-radius:50%;background:rgba(255,255,255,.16);color:#fff;
  display:flex;align-items:center;justify-content:center;
  font-size:24px;line-height:1;text-decoration:none;
}
.l-zoom .l-x:hover{background:rgba(255,255,255,.3);text-decoration:none}

/* ── จอกว้างขึ้น ────────────────────────────────────────────────────── */
@media (min-width:700px){
  .l-rows{grid-template-columns:1fr 1fr}
  .l-groups{grid-template-columns:1fr 1fr}
}
@media (min-width:900px){
  .l-hero{padding:44px 0 10px}
  .l-legend{grid-template-columns:1fr 1fr}
  .l-lan-grid{grid-template-columns:1fr 340px;align-items:center;gap:28px}
  .l-art{padding:20px 24px}
  /* สลับซ้ายขวา: แถวคู่เอาภาพไว้ขวา */
  .l-rows .l-row:nth-child(even){grid-template-columns:1fr 76px}
  .l-rows .l-row:nth-child(even) .l-pic{order:2}
  .l-rows .l-row:nth-child(even) .l-txt{order:1}
}

@media print{
  .l-zoom{display:none !important}
  .l-shot{break-inside:avoid}
}