… */
#news-carousel .owl-item > a {
display:block;
filter: drop-shadow(0 10px 28px rgba(0,0,0,.18));
transition: transform .22s ease, filter .22s ease;
max-width: 520px; /* กันยืดเต็มช่องเกินไป */
margin: 0 auto;
}
#news-carousel .owl-item > a:hover {
transform: translateY(-2px);
filter: drop-shadow(0 18px 42px rgba(0,0,0,.26));
}
/* วิดีโอ:
… (บางธีมอาจมี .card ด้านในก็ครอบได้เหมือนกัน) */
#yt-carousel .owl-item > a,
.channel-item {
display:block;
filter: drop-shadow(0 10px 28px rgba(0,0,0,.18));
transition: transform .22s ease, filter .22s ease;
max-width: 520px;
margin: 0 auto;
}
#yt-carousel .owl-item > a:hover,
.channel-item:hover {
transform: translateY(-2px);
filter: drop-shadow(0 18px 42px rgba(0,0,0,.26));
}
/* ====================== Thumbs: 16:9 + crop + round top ====================== */
.news-thumb,
.yt-thumb {
position: relative;
border-radius: 18px 18px 0 0;
overflow: hidden;
background: #f3f3f3;
}
.news-thumb::before,
.yt-thumb::before { content:""; display:block; padding-top:56.25%; } /* 16:9 */
.news-thumb > img,
.yt-thumb > img {
position: absolute; inset: 0;
width: 100%; height: 100%;
object-fit: cover; object-position: center;
display: block;
}
.news-card:hover .news-thumb > img { transform: scale(1.035); transition: transform .35s ease; }
.channel-item:hover .yt-thumb > img { transform: scale(1.03); transition: transform .25s ease; }
/* ====================== Titles: 2 บรรทัดเท่ากันหมด (ข่าว + วิดีโอ) ====================== */
.news-title,
.yt-title {
margin-top: .6rem;
padding: 0 .75rem .9rem;
color: #20352a;
font-weight: 700; /* ใช้ 700 ให้ดูชัด; วิดีโอใช้ค่านี้ได้เช่นกัน */
text-align: center;
line-height: 1.35;
display: -webkit-box;
-webkit-line-clamp: 2; /* แสดงสูงสุด 2 บรรทัด */
-webkit-box-orient: vertical;
overflow: hidden;
min-height: calc(1.35em * 2); /* บังคับให้สูงเท่ากันทุกใบ */
}
/* ====================== News meta ====================== */
.news-meta { color:#64748b; font-size:.95rem; }
/* ====================== Spacing under HERO (ถ้ามีใช้อยู่) ====================== */
.home-hero { margin-bottom: 56px; }
@media (max-width: 768px){ .home-hero { margin-bottom: 36px; } }
/* ===== Owl Carousel stage: ปล่อย overflow แต่ไม่ให้ยืดเต็มจอ ===== */
.news-carousel .owl-stage-outer,
.channel-carousel .owl-stage-outer {
overflow: visible;
}
/* ===== การ์ดข่าว ===== */
.news-card {
background:#fff;
border-radius:18px;
overflow:hidden;
box-shadow:none;
filter: drop-shadow(0 10px 28px rgba(0,0,0,.18));
transition: transform .22s ease, filter .22s ease;
display:flex;
flex-direction:column;
height:100%;
}
.news-card:hover {
transform: translateY(-2px);
filter: drop-shadow(0 18px 42px rgba(0,0,0,.26));
}
/* ===== การ์ด Channel ===== */
.channel-item {
display:flex; /* <<< ดันเนื้อหาภายใน */
flex-direction:column;
justify-content:space-between;
background:#fff;
border-radius:18px;
overflow:hidden;
box-shadow:none;
filter: drop-shadow(0 10px 28px rgba(0,0,0,.18));
transition: transform .22s ease, filter .22s ease;
height:100%;
}
.channel-item:hover {
transform: translateY(-2px);
filter: drop-shadow(0 18px 42px rgba(0,0,0,.26));
}
/* ===== Thumb 16:9 ครอป ===== */
.news-thumb,
.yt-thumb {
position:relative;
border-radius:18px 18px 0 0;
overflow:hidden;
background:#f3f3f3;
}
.news-thumb::before,
.yt-thumb::before {
content:"";
display:block;
padding-top:56.25%;
}
.news-thumb > img,
.yt-thumb > img {
position:absolute;
inset:0;
width:100%;
height:100%;
object-fit:cover;
object-position:center;
display:block;
}
/* ===== Title (2 บรรทัดเท่ากันทุกใบ) ===== */
.news-title,
.yt-title {
margin-top:.6rem;
padding:0 .75rem .9rem;
color:#20352a;
font-weight:700;
text-align:center;
line-height:1.35;
display:-webkit-box;
-webkit-line-clamp:2;
-webkit-box-orient:vertical;
overflow:hidden;
min-height:calc(1.35em * 2);
}
/* ===================== Owl helpers (ใช้ร่วมกัน) ===================== */
.news-carousel .owl-item,
.channel-carousel .owl-item {
padding: 10px 14px;
}
.news-carousel .owl-stage-outer,
.channel-carousel .owl-stage-outer {
overflow: visible; /* ให้เงาไม่ถูกตัด */
}
/* เว้นช่องว่างระหว่าง News กับหัวข้อ Channel */
.news-carousel {
margin-bottom: 44px !important;
}
/* ——— ช่องว่างก่อน footer (ใช้ class .home-bottom-gap ที่ section สุดท้ายของหน้าแรก) ——— */
.home-bottom-gap { margin-bottom: 96px !important; }
@media (max-width: 576px) { .home-bottom-gap { margin-bottom: 64px !important; } }
/* ===================== News ===================== */
.news-item { display: block; text-decoration: none; color: inherit; }
/* ลิงก์ครอบการ์ดถือเงา + ล็อกความกว้างต่อใบ (กันยืดเต็มจอ) */
#news-carousel .owl-item > a {
display: block; width: 100%; height: 100%;
max-width: 520px !important;
margin: 0 auto !important;
filter: drop-shadow(0 10px 28px rgba(0,0,0,.18));
transition: transform .22s ease, filter .22s ease;
}
#news-carousel .owl-item > a:hover {
transform: translateY(-2px);
filter: drop-shadow(0 18px 42px rgba(0,0,0,.26));
}
/* การ์ด news equal-height */
.news-card {
border: 0; border-radius: 18px; overflow: hidden; background: #fff; box-shadow: none;
display: flex; flex-direction: column; height: 100%;
}
/* รูป 16:9 + ครอป */
.news-thumb { position: relative; border-radius: 18px 18px 0 0; overflow: hidden; background: #f3f3f3; }
.news-thumb::before { content: ""; display: block; padding-top: 56.25%; }
.news-thumb > img {
position: absolute; inset: 0; width: 100%; height: 100%;
object-fit: cover; object-position: center; display: block; transition: transform .35s ease;
}
.news-card:hover .news-thumb > img { transform: scale(1.035); }
/* Title 2 บรรทัดเท่ากันทุกใบ */
.news-title{
font-weight: 700; line-height: 1.35; text-align: center;
display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
overflow: hidden; min-height: calc(1.35em * 2);
padding: 0 .75rem .9rem;
}
.news-meta { color: #64748b; font-size: .95rem; margin-top: auto; }
/* ===================== VPHCAP Channel (YouTube) ===================== */
/* ลิงก์เป็นการ์ดทั้งใบ + เงา + ล็อกความกว้างต่อใบ */
#yt-carousel .owl-item > a{
display: flex; width: 100%; height: 100%;
max-width: 520px !important;
margin: 0 auto !important;
filter: drop-shadow(0 10px 28px rgba(0,0,0,.18));
transition: transform .22s ease, filter .22s ease;
}
#yt-carousel .owl-item > a:hover{
transform: translateY(-2px);
filter: drop-shadow(0 18px 42px rgba(0,0,0,.26));
}
/* การ์ด channel equal-height */
.channel-item{
text-decoration: none; color: inherit; background: #fff;
border-radius: 18px; overflow: hidden; box-shadow: none;
display: flex; flex-direction: column; height: 100%; width: 100%;
}
/* รูป 16:9 + ครอป */
.yt-thumb{
position: relative; overflow: hidden; background: #f3f3f3;
border-radius: 18px 18px 0 0;
}
.yt-thumb::before{ content: ""; display: block; padding-top: 56.25%; }
.yt-thumb img{
position: absolute; inset: 0; width: 100%; height: 100%;
object-fit: cover; object-position: center; display: block; transition: transform .25s ease;
}
.channel-item:hover .yt-thumb img{ transform: scale(1.03); }
/* Title 2 บรรทัดเท่ากันทุกใบ */
.yt-title{
padding: 10px 14px 16px; color: #20352a; font-weight: 700; text-align: center;
line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
overflow: hidden; min-height: calc(1.35em * 2);
}
/* =============================================================
/* ======= VPHCAP home carousels (News + Channel) ======= */
:root{
/* ปรับขนาดการ์ดสูงสุดต่อใบได้ที่นี่ ถ้าอยากเล็ก/ใหญ่ขึ้น */
--card-max: 420px;
}
/* ให้เงาแสดงเลยกรอบ stage ได้ */
#news-carousel .owl-stage-outer,
#yt-carousel .owl-stage-outer{
overflow: visible;
}
/* ทำ stage และ item เป็น flex เพื่อ “equal height” */
#news-carousel .owl-stage,
#yt-carousel .owl-stage{
display: flex;
}
#news-carousel .owl-item,
#yt-carousel .owl-item{
display: flex;
align-items: stretch;
padding: 10px 14px; /* ระยะห่างระหว่างใบ */
}
/* ลิงก์ที่หุ้มการ์ด = กล่องการ์ดภายนอก (ถือเงา, จำกัดความกว้าง, ยืดสูงเต็มช่อง) */
#news-carousel .owl-item > a,
#yt-carousel .owl-item > a{
display: flex;
flex: 1 1 auto;
height: 100%;
max-width: var(--card-max); /* กันการ์ดยืดเกินไปบนจอใหญ่ */
margin: 0 auto; /* จัดให้อยู่กลางช่อง */
filter: drop-shadow(0 10px 28px rgba(0,0,0,.18));
transition: transform .22s ease, filter .22s ease;
}
#news-carousel .owl-item > a:hover,
#yt-carousel .owl-item > a:hover{
transform: translateY(-2px);
filter: drop-shadow(0 18px 42px rgba(0,0,0,.26));
}
/* ตัว “การ์ดจริง” ด้านใน ต้องยืดเต็มเพื่อให้สูงเท่ากัน */
.news-card,
.channel-item{
background: #fff;
border-radius: 18px;
overflow: hidden;
box-shadow: none;
display: flex;
flex-direction: column;
height: 100%;
}
/* รูป 16:9 ครอปเต็มกรอบ */
.news-thumb,
.yt-thumb{
position: relative;
overflow: hidden;
background: #f3f3f3;
border-radius: 18px 18px 0 0;
}
.news-thumb::before,
.yt-thumb::before{
content:"";
display:block;
padding-top:56.25%;
}
.news-thumb > img,
.yt-thumb > img{
position:absolute; inset:0;
width:100%; height:100%;
object-fit:cover; object-position:center;
}
/* ชื่อ 2 บรรทัด “สูงเท่ากันทุกใบ” */
.news-title,
.yt-title{
font-weight:700;
line-height:1.35;
text-align:center;
display:-webkit-box;
-webkit-line-clamp:2;
-webkit-box-orient:vertical;
overflow:hidden;
min-height:calc(1.35em * 2);
padding:10px 14px 16px;
}
/* meta ของข่าววางล่างได้สวยขึ้น */
.news-card .card-body{
display: flex;
flex-direction: column;
}
.news-meta{ color:#64748b; font-size:.95rem; margin-top:auto; }
/* เว้นระยะระหว่าง News กับ Channel ให้หายอึดอัด */
.news-carousel{ margin-bottom: 44px !important; }
/* เว้นก่อน footer เฉพาะหน้า Home */
.home-bottom-gap{ margin-bottom: 96px; }
@media (max-width: 576px){
:root{ --card-max: 360px; } /* มือถือให้การ์ดเล็กลงนิด */
.home-bottom-gap{ margin-bottom: 64px; }
}
/* ===== Fix: News items width ให้เท่ากันทุกใบ (3 ใบบนเดสก์ท็อป) ===== */
#news-carousel .owl-item{
/* บังคับความกว้างไอเท็มตามจำนวน items ของ JS (margin 24px) */
width: calc((100% - 2 * 24px) / 3) !important; /* desktop: 3 */
}
@media (max-width: 991.98px){
#news-carousel .owl-item{
width: calc((100% - 24px) / 2) !important; /* tablet: 2 */
}
}
@media (max-width: 575.98px){
#news-carousel .owl-item{
width: 100% !important; /* mobile: 1 */
}
}
/* ทำ anchor + การ์ดข่าวยืดเต็มช่อง (เหมือน Channel) */
#news-carousel .owl-item > a{
display:flex;
flex:1 1 auto;
height:100%;
max-width: var(--card-max);
margin:0 auto;
}
.news-item{ display:flex; } /* ให้ลิงก์เป็น flex container */
.news-card{ width:100%; height:100%; }/* การ์ดยืดเต็มช่อง */
/* กรอบรูปการ์ด (อัตราส่วน 16:9) */
.card-box-img{
position:relative;
width:100%;
overflow:hidden;
border-radius:12px;
background:#f3f3f3;
}
.card-box-img::after{
content:"";
display:block;
padding-top:56.25%; /* 16:9 (ถ้าอยากเป็น 3:2 ใช้ 66.6667%) */
}
/* รูปภาพ: เติมกรอบให้เต็มและครอปกลาง ไม่ยืดสัดส่วน */
.card-box-img img{
position:absolute; inset:0;
width:100% !important;
height:100% !important;
object-fit:cover; /* ครอปให้พอดีกรอบ */
object-position:center; /* จัดครอปจากกึ่งกลาง */
display:block;
}