/* ============================================
   IDIN — สไตล์หน้าแรก + ส่วนเสริมหน้าสินค้า
   ============================================ */
:root {
    --idin-green: #2e7d32;
    --idin-green-dark: #1b5e20;
    --idin-green-light: #e8f5e9;
    --idin-amber: #f9a825;
    --idin-line: #e0e0d8;
    --idin-muted: #607d8b;
    --idin-ease: cubic-bezier(0.22, 1, 0.36, 1);
    --idin-focus: #1b5e20;
}

.idin-wrap { max-width: 1140px; margin: 0 auto; padding: 0 20px; }
.idin-sec { padding: 52px 0; }
.idin-sec-alt { background: #f5f7f2; }
.idin-h2 { text-align: center; font-size: 28px; color: var(--idin-green-dark); margin-bottom: 34px; }
.idin-center { text-align: center; margin-top: 28px; }

/* หัวข้อ + คำโปรย */
.idin-sec-head { text-align: center; margin-bottom: 34px; }
.idin-sec-head .idin-h2 { margin-bottom: 6px; }
.idin-subtitle { color: var(--idin-muted); font-size: 15px; margin: 0; }

.idin-btn { display: inline-block; padding: 12px 26px; border-radius: 8px; font-weight: 600; text-decoration: none; transition: background-color .18s var(--idin-ease), transform .1s var(--idin-ease), filter .18s var(--idin-ease); }
.idin-btn:active { transform: translateY(1px); }
.idin-btn:focus-visible { outline: 3px solid var(--idin-focus); outline-offset: 2px; }
.idin-btn-green { background: var(--idin-green); color: #fff; }
.idin-btn-green:hover { background: var(--idin-green-dark); }
.idin-btn-amber { background: var(--idin-amber); color: #fff; }
.idin-btn-amber:hover { filter: brightness(0.94); }
.idin-btn-ghost { border: 2px solid #fff; color: #fff; }
.idin-btn-ghost:hover { background: rgba(255, 255, 255, .14); }
.idin-btn-line { background: #06c755; color: #fff; }
.idin-btn-line:hover { filter: brightness(0.94); }
.idin-btn-red { background: #f00; color: #fff; }
.idin-btn-red:hover { filter: brightness(0.92); }
.idin-btn-ghost:focus-visible { outline-color: #fff; }

/* Hero */
.idin-hero { background: linear-gradient(120deg, var(--idin-green-dark) 0%, var(--idin-green) 100%); color: #fff; }
.idin-hero-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: 30px; align-items: center; padding-top: 48px; padding-bottom: 48px; }
.idin-hero h1 { font-size: 40px; line-height: 1.25; margin-bottom: 14px; color: #fff; }
.idin-hero p { font-size: 17px; color: #dcedc8; margin-bottom: 24px; line-height: 1.7; }
.idin-hero .idin-btn { margin-right: 10px; }
.idin-hero-imgs { display: flex; gap: 10px; justify-content: center; align-items: flex-end; }
.idin-hero-imgs img { height: 230px; width: auto; object-fit: contain; filter: drop-shadow(0 12px 18px rgba(0, 0, 0, .35)); }
.idin-hero-imgs img:nth-child(2) { height: 280px; }
.idin-badges { display: flex; gap: 14px; margin-top: 26px; flex-wrap: wrap; font-size: 14px; }
.idin-badges div { background: rgba(255, 255, 255, .14); padding: 8px 14px; border-radius: 20px; }

/* Categories */
.idin-cats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.idin-cat { background: #fff; border: 1px solid var(--idin-line); border-radius: 14px; padding: 26px 16px; text-align: center; text-decoration: none; transition: border-color .2s var(--idin-ease), box-shadow .2s var(--idin-ease), transform .2s var(--idin-ease); }
.idin-cat:hover { border-color: var(--idin-green); box-shadow: 0 8px 20px rgba(46, 125, 50, .12); transform: translateY(-3px); }
.idin-cat:focus-visible { outline: 3px solid var(--idin-focus); outline-offset: 2px; }
.idin-cat img { max-height: 115px; width: auto; object-fit: contain; margin-bottom: 12px; }
.idin-cat h3 { font-size: 17px; color: var(--idin-green-dark); margin: 0 0 6px; }
.idin-cat p { font-size: 13px; color: var(--idin-muted); margin: 0; }

/* CTA ขายส่ง */
.idin-cta { background: #795548; color: #fff; }
.idin-cta-grid { display: grid; grid-template-columns: 1.2fr .8fr; gap: 24px; align-items: center; padding-top: 44px; padding-bottom: 44px; }
.idin-cta h2 { color: #fff; font-size: 26px; margin-bottom: 10px; }
.idin-cta p { color: #d7ccc8; line-height: 1.7; }
.idin-cta-btns { display: grid; gap: 10px; justify-self: center; }
.idin-cta-btns .idin-btn { font-size: 17px; text-align: center; }

/* แถบความน่าเชื่อถือ (Trust) */
.idin-trust { background: #fff; border-top: 1px solid var(--idin-line); border-bottom: 1px solid var(--idin-line); }
.idin-trust-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; padding-top: 26px; padding-bottom: 26px; text-align: center; }
.idin-trust-ic { font-size: 26px; }
.idin-trust-item h3 { font-size: 15px; color: var(--idin-green-dark); margin: 6px 0 4px; }
.idin-trust-item p { font-size: 13px; color: var(--idin-muted); margin: 0; }

/* Videos */
.idin-videos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.idin-video { position: relative; border-radius: 12px; overflow: hidden; aspect-ratio: 16/9; background: #212121; }
.idin-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; }

/* Posts */
.idin-posts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.idin-post { background: #fff; border: 1px solid var(--idin-line); border-radius: 14px; overflow: hidden; text-decoration: none; transition: border-color .2s var(--idin-ease), box-shadow .2s var(--idin-ease), transform .2s var(--idin-ease); }
.idin-post:hover { border-color: var(--idin-green); box-shadow: 0 8px 20px rgba(46, 125, 50, .1); transform: translateY(-3px); }
.idin-post:focus-visible { outline: 3px solid var(--idin-focus); outline-offset: 2px; }
.idin-post img { width: 100%; height: 160px; object-fit: cover; }
.idin-post h3 { font-size: 16px; line-height: 1.5; margin: 14px 16px 8px; color: inherit; }
.idin-post p { font-size: 13px; color: var(--idin-muted); margin: 0 16px 16px; }

/* หน้าสินค้า — ส่วนเสริม */
.idin-product-meta { margin: 14px 0; font-size: 14px; line-height: 2; color: #455a64; }
.idin-bulk-box { background: #fff8e1; border: 1px solid #ffe082; border-radius: 10px; padding: 14px 16px; font-size: 14px; margin: 14px 0; }
.idin-bulk-box a { color: #e65100; font-weight: 700; }
.idin-warning { background: #ffebee; border: 1px solid #ffcdd2; border-radius: 10px; padding: 14px 16px; font-size: 13px; color: #b71c1c; margin-top: 16px; line-height: 1.8; }

@media (max-width: 860px) {
    .idin-hero-grid, .idin-cta-grid { grid-template-columns: 1fr; }
    .idin-cats { grid-template-columns: repeat(2, 1fr); }
    .idin-trust-grid { grid-template-columns: repeat(2, 1fr); gap: 22px 16px; }
    .idin-videos, .idin-posts { grid-template-columns: 1fr; }
    .idin-hero h1 { font-size: 30px; }
}

@media (prefers-reduced-motion: reduce) {
    .idin-btn, .idin-cat, .idin-post { transition-duration: .01ms; }
    .idin-cat:hover, .idin-post:hover, .idin-btn:active { transform: none; }
}

/* === ไอดิน: hero เต็มจอ + กันรูปล้น (16/7/2026) === */
html { overflow-x: clip; }
.idin-front > .idin-hero,
.idin-front > .idin-sec,
.idin-front > .idin-cta,
.idin-front > .idin-trust {
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
}
.idin-hero-grid > div { min-width: 0; }
.idin-hero-imgs { min-width: 0; }
.idin-hero-imgs img { height: auto; max-height: 230px; max-width: 33%; }
.idin-hero-imgs img:nth-child(2) { max-height: 290px; max-width: 40%; }
@media (max-width: 860px) {
    .idin-hero-imgs img { max-height: 180px; }
    .idin-hero-imgs img:nth-child(2) { max-height: 210px; }
}