.section-blog { color: #05070B; background-color: #ffffff; margin-top: 100px !important; max-width: 1200px; margin: 0 auto; padding: 2rem 1rem; } .div-none{ display: none !important; } /* .section-blog .container { max-width: 1280px; margin: 0 auto; } */ .blog-header h2 { font-size: 2rem; font-weight: 600; line-height: 1.2; margin-bottom: 1rem; } .blog-header p { font-size: 1.125rem; font-weight: 400; line-height: 1.5; } .blog-featured { margin-top: 80px; } .blog-featured img { width: 100%; border-radius: 16px; transition: transform 0.4s ease; display: block; } /* Zoom effect on hover */ .blog-featured:hover img { transform: scale(1.08); } .blog-meta { display: flex; gap: 1rem; font-size: 0.875rem; font-weight: 300; margin: 1rem 0; } .blog-featured h3 { font-size: 2.25rem; font-weight: 500; } .blog-featured p { font-size: 1.125rem; line-height: 1.6; } .blog-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 60px; margin-top: 80px; } .blog-card img { width: 100%; height: auto; border-radius: 16px; transition: transform 0.4s ease; display: block; } /* Zoom effect on hover */ .blog-card:hover img { transform: scale(1.08); } .blog-card h4 { font-size: 1.375rem; font-weight: 500; margin-top: 1rem; } @media (prefers-color-scheme: dark) { .section-blog { color: #05070B; background-color: #ffffff; } .blog-meta span { color: #dddddd; } } @media (max-width: 768px) { .section-blog { margin-top: 100px !important; max-width: 1200px; margin: 0 auto; padding: 2rem 1rem; } .blog-header h2 { font-size: 2rem; } .blog-featured h3 { font-size: 1.5rem; } } /* Blog_inbox */ .Blog_inbox { width: 100%; padding: 112px 64px; background-color: var(--Color-Mirage-Lightest, #E7E8E9); display: flex; justify-content: center; align-items: center; } .Blog_inbox .container { max-width: 1280px; width: 100%; display: flex; flex-direction: column; gap: 80px; } .Blog_inbox .content-row { display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-end; gap: 32px; } .Blog_inbox .text-box { flex: 1 1 300px; display: flex; flex-direction: column; align-items: center; gap: 24px; } .Blog_inbox .text-box h2 { font-size: 52px; line-height: 1.2; font-weight: 500; color: var(--Color-Neutral-Darkest, black); text-align: center; } .Blog_inbox .form-box { width: 100%; max-width: 513px; display: flex; flex-direction: column; gap: 16px; } .Blog_inbox .input-row { display: flex; gap: 16px; align-items: center; } .Blog_inbox .email-input { flex: 1; padding: 8px 12px; border-radius: 12px; border: 1px solid rgba(0, 0, 0, 0.15); background: transparent; font-size: 18px; line-height: 27px; color: rgba(0, 0, 0, 0.6); } .Blog_inbox .subscribe-btn { padding: 10px 24px; border-radius: 100px; background-color: var(--Color-Mirage, #121927); color: var(--Color-White, white); font-size: 16px; font-weight: 500; border: 1px solid var(--Color-Mirage, #121927); cursor: pointer; } /* Responsive */ @media (max-width: 768px) { .Blog_inbox .text-box h2 { font-size: 36px; text-align: center; } .Blog_inbox .content-row { flex-direction: column; align-items: center; } } /* Dark Mode Support (Optional: Add class .dark on ) */ body.dark .Blog_inbox { background-color: #05070B; } body.dark .Blog_inbox .text-box h2 { color: white; } body.dark .Blog_inbox .email-input { color: rgba(255, 255, 255, 0.6); border-color: rgba(255, 255, 255, 0.15); } a img { transition: transform 0.3s ease; display: block; } a:hover img { transform: scale(1.05); cursor: pointer; } /* --- sm xs --- */ @media (min-width: 200px) and (max-width: 767px){ .Blog_inbox .text-box { flex: 1 1 0px; display: flex; flex-direction: column; align-items: center; gap: 24px; } .blog-featured { margin-top: 20px; } } /* */ .blog-header{ margin-bottom: 20px; } .featured-hover-container { position: relative; overflow: hidden; border-radius: 16px; /* box-shadow: 0 12px 24px rgba(0, 0, 0, 0.15); */ transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1); } .featured-hover-container img { height: 500px !important; object-fit: cover; width: 100%; display: block; object-fit: cover; transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1), filter 0.4s ease; } .featured-hover-container:hover img { transform: scale(1.04); filter: brightness(85%) saturate(1.2); } .featured-hover-content { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: flex-end; padding: 24px; color: #fff; background: linear-gradient(to top, rgba(0,0,0,0.75), rgba(0,0,0,0.2) 60%, transparent); opacity: 1; transform: translateY(0); transition: opacity 0.5s ease, transform 0.5s ease; pointer-events: auto; } .featured-hover-container:hover .featured-hover-content { opacity: 1; transform: translateY(0); pointer-events: auto; } .featured-hover-content h3 { font-size: 22px; margin: 12px 0 6px; font-weight: 600; line-height: 1.3; } .featured-hover-content p { font-size: 14px; margin: 0; line-height: 1.5; opacity: 0.9; } .featured-hover-content .blog-meta { font-size: 12px; margin-bottom: 8px; opacity: 0.75; display: flex; gap: 12px; flex-wrap: wrap; } /* .event-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 24px; align-items: stretch; } .event-card { background: #fff; border-radius: 12px; overflow: hidden; box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08); display: flex; flex-direction: column; } .event-card.highlight { grid-column: span 2; display: flex; flex-direction: column; } */ .event-grid{ display:grid; gap:1.25rem; /* grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); */ align-items:stretch; } .event-card{ position:relative; overflow:hidden; border-radius:16px; background:#0f0f0f; /* สีพื้นหลังกรณีรูปโหลดไม่ทัน */ /* box-shadow:0 10px 25px rgba(0,0,0,.15); */ transition:transform .25s ease, box-shadow .25s ease; isolation:isolate; /* ให้ overlay ซ้อนถูกชั้น */ } .event-card:hover{ transform:translateY(-4px); box-shadow:0 18px 40px rgba(0,0,0,.22); } .featured-hover-container{ position:relative; height:100%; } .featured-hover-container img{ width:100%; height:100%; aspect-ratio: 16 / 9; /* คุมสัดส่วนรูป */ object-fit:cover; display:block; transition:transform .5s ease; } .event-card:hover .featured-hover-container img{ transform:scale(1.05); } /* Gradient overlay ด้านล่าง */ .featured-hover-content{ position:absolute; inset:auto 0 0 0; padding:1.1rem 1.25rem 1.25rem; color:#fff; background:linear-gradient(to top, rgba(0,0,0,.65), rgba(0,0,0,.35), rgba(0,0,0,0)); } .blog-meta{ display:flex; gap:.75rem; font-size:.9rem; opacity:.9; margin-bottom:.35rem; } .featured-hover-content h3{ font-size:clamp(1.05rem, 1.2vw + .9rem, 1.35rem); line-height:1.35; margin:.25rem 0 .35rem; } .featured-hover-content p{ font-size:.95rem; line-height:1.5; opacity:.95; max-height: 4.5em; /* 3 บรรทัด */ overflow:hidden; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; /* ตัดคำแบบ clamp */ } /* การ์ดไฮไลต์ให้กิน 2 คอลัมน์บนจอใหญ่ */ @media (min-width: 1024px){ .event-card.highlight{ grid-column:span 2; } .event-card.highlight .featured-hover-content h3{ font-size:clamp(1.25rem, 1.1vw + 1.1rem, 1.6rem); } .event-card.highlight .featured-hover-container img{ aspect-ratio: 21 / 9; } } /* ระยะห่างของลิงก์ */ .event-card a{ display:block; color:inherit; text-decoration:none; } /* ---- Unique classes for photo mosaic ---- */ .avv-mosaic { width: 100%; } .avv-mosaic-grid{ display: grid; grid-template-columns: repeat(2, minmax(260px, 1fr)); /* 2 คอลัมน์ */ gap: 16px; max-width: 920px; /* ปรับได้ตามคอนเทนเนอร์ */ margin: 0 auto; } .avv-mosaic-item{ position: relative; overflow: hidden; border-radius: 16px; display: block; /* ให้ กับ

ทำงานเหมือนกัน */ background: #111; } .avv-mosaic-item img{ width: 100%; height: 100%; aspect-ratio: 16/9; /* สัดส่วนใกล้ 376×211.5 */ object-fit: cover; display: block; } /* ช่อง more: ใส่ overlay มืด + ตัวเลขกลางภาพ */ .avv-mosaic-more::before{ content: ""; position: absolute; inset: 0; background: rgba(0,0,0,.45); } .avv-mosaic-count{ position: absolute; inset: 0; display: grid; place-items: center; font-weight: 700; font-size: clamp(22px, 4vw, 36px); color: #fff; text-shadow: 0 2px 8px rgba(0,0,0,.4); pointer-events: none; /* ให้คลิกทั้งแผ่นได้ */ } /* Hover เล็กน้อย (เอาออกได้) */ .avv-mosaic-item:hover img{ transform: scale(1.01); transition: transform .2s ease; } /* --- Responsive --- */ @media (max-width: 640px){ .avv-mosaic-grid{ grid-template-columns: 1fr; } /* มือถือ: 1 คอลัมน์ */ } /* ---- Photo Gallery ---- */ .avv-gallery { width: 100%; padding: 8px 0; } .avv-gallery-grid { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(350px, 1fr)); } .avv-gallery-item { border-radius: 14px; overflow: hidden; background: #111; } .avv-gallery-item img { width: 100%; height: auto; display: block; object-fit: cover; transition: transform 0.25s ease; } .avv-gallery-item:hover img { transform: scale(1.02); } /* Responsive spacing adjust */ @media (max-width: 640px) { .avv-gallery-grid { gap: 12px; } } figure { margin: 0 0 0rem !important; } section .content { display: flex; flex-direction: column; gap: 10px; font-size: 18px; line-height: 1.6; } .avv-gallery { width: 100%; padding: 8px 0; } .avv-gallery-grid { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(350px, 1fr)); } .avv-gallery-item { border-radius: 14px; overflow: hidden; background: #111; } .avv-gallery-item img { width: 100%; aspect-ratio: 4 / 3; /* หรือ 16/9 */ object-fit: cover; display: block; transition: transform 0.25s ease; }