/* ===== HOME HERO ===== */
.home-hero {
    background: linear-gradient(135deg, #0091BE 0%, #003d55 65%, #001a25 100%);
    position: relative; overflow: hidden;
    padding: 40px 0 45px;
}
.home-hero::before {
    content:''; position:absolute; inset:0;
    background:
        radial-gradient(ellipse at 80% 10%, rgba(255,255,255,0.07) 0%, transparent 55%),
        radial-gradient(ellipse at 5%  85%, rgba(0,145,190,0.18) 0%, transparent 45%);
    pointer-events:none;
}
.home-hero > .container { position:relative; z-index:2; }

.home-hero-eyebrow {
    display:inline-flex; align-items:center; gap:6px;
    background:rgba(255,255,255,0.12);
    backdrop-filter:blur(10px);
    border:1px solid rgba(255,255,255,0.22);
    color:#fff; font-size:12px; font-weight:600;
    padding:5px 14px; border-radius:50px;
    margin-bottom:14px;
}
.home-hero-title {
    font-size:clamp(1.6rem, 3vw, 2.2rem);
    font-weight:800; color:#fff;
    line-height:1.2; margin-bottom:12px;
    text-shadow:0 4px 14px rgba(0,0,0,0.22);
}
.home-hero-title span { color:#7EDCF5; }
.home-hero-desc {
    color:rgba(255,255,255,0.8);
    font-size:14px; line-height:1.65;
    margin-bottom:20px; max-width:480px;
}
/* Search */
.home-search-bar {
    display:flex; align-items:center;
    background:#fff; border-radius:50px;
    box-shadow:0 14px 45px rgba(0,0,0,0.25);
    overflow:hidden; max-width:520px;
    transition:transform .3s ease;
}
.home-search-bar:focus-within { transform:scale(1.015); }
.home-search-bar .bi-search {
    font-size:16px; color:#aaa; padding:0 6px 0 18px; flex-shrink:0;
}
.home-search-bar input {
    border:none; outline:none;
    font-family:'Prompt',sans-serif;
    font-size:14px; color:#333; padding:11px 12px;
    flex:1; background:transparent;
}
.home-search-bar button {
    background:#0091BE; color:#fff; border:none;
    border-radius:50px; font-weight:700; font-size:13px;
    padding:10px 24px; margin:4px; cursor:pointer;
    transition:background .25s; white-space:nowrap;
}
.home-search-bar button:hover { background:#007ba1; }
/* Stats */
.home-stats {
    display:flex; align-items:center;
    gap:18px; margin-top:18px;
}
.home-stat { text-align:center; }
.home-stat-num {
    display:block; font-size:1.6rem; font-weight:800;
    color:#fff; line-height:1;
}
.home-stat-lbl {
    display:block; font-size:11px;
    color:rgba(255,255,255,0.65); margin-top:2px;
}
.home-stat-sep { width:1px; height:34px; background:rgba(255,255,255,0.22); }

/* Sliding covers in hero - Coverflow Style - Right Movement */
.hero-covers-sliding {
    width: 100%;
    max-width: 600px;
    height: 350px;
    position: relative;
    overflow: hidden;
    perspective: 1200px; 
    display: flex;
    align-items: center;
    mask-image: linear-gradient(to right, transparent, black 20%, black 80%, transparent);
    -webkit-mask-image: linear-gradient(to right, transparent, black 20%, black 80%, transparent);
}
.covers-track {
    display: flex;
    flex-direction: row;
    padding: 40px 0;
    width: max-content;
    /* แอนิเมชันเลื่อนไปทางขวาแบบไร้รอยต่อ - ปรับให้ช้าลง */
    animation: slideCoversRight 90s linear infinite;
    transform-style: preserve-3d;
}
.covers-track:hover {
    animation-play-state: paused;
}
.cover-item {
    width: 140px; /* ลดความกว้างลงให้ดูสมส่วน */
    height: 190px; /* ลดความสูงลงให้พอดี */
    flex-shrink: 0;
    margin-right: -30px; /* ปรับการซ้อนทับให้เข้ากับขนาดใหม่ */
    border-radius: 6px;
    overflow: hidden;
    box-shadow: 0 10px 25px rgba(0,0,0,0.4);
    border: 1px solid rgba(255,255,255,0.25);
    
    /* เอียงไปทางขวา */
    transform: perspective(1000px) rotateY(40deg) scale(0.85);
    filter: brightness(0.65) grayscale(0.2);
    transition: all 0.5s ease;
    z-index: 1;
}

/* เมื่อรูปมาอยู่ตรงกลาง */
.cover-item.is-active {
    transform: perspective(1000px) rotateY(0deg) scale(1.25) translateZ(60px);
    filter: brightness(1) grayscale(0);
    box-shadow: 0 25px 45px rgba(0,0,0,0.6);
    z-index: 100;
    margin-right: 35px;
    margin-left: 35px;
}

.cover-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

@keyframes slideCoversRight {
    0% { transform: translateX(-33.33%); } /* เริ่มจากจุดที่รูปเต็มพื้นที่ */
    100% { transform: translateX(0); }
}

/* ===== CATEGORY CHIPS ===== */
.cat-strip {
    background:#fff;
    border-bottom:1px solid rgba(0,0,0,0.06);
    box-shadow:0 2px 10px rgba(0,0,0,0.04);
    position:sticky; top:56px; z-index:90;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
    -ms-overflow-style:none;
    scrollbar-width:none;
}
.cat-strip::-webkit-scrollbar { display:none; }
.cat-scroll-wrap { }
.cat-chips {
    display:inline-flex;
    gap:8px;
    padding:12px 20px 12px 0;
}
.cat-chip {
    flex-shrink:0;
    display:inline-flex; align-items:center; gap:6px;
    padding:6px 15px; border-radius:50px;
    font-size:13px; font-weight:600; color:#555;
    border:1.5px solid rgba(0,0,0,0.09);
    background:#f7f8fc;
    text-decoration:none !important;
    transition:all .25s;
}
.cat-chip:hover {
    color:#0091BE; background:rgba(0,145,190,0.08);
    border-color:rgba(0,145,190,0.28); transform:translateY(-2px);
}
.cat-chip-cnt {
    background:#0091BE; color:#fff;
    border-radius:20px; font-size:10px; font-weight:700;
    padding:1px 7px;
}

/* ===== GROUPS SECTION ===== */
.home-groups { padding:40px 0 70px; }

/* Featured horizontal card (first group) */
.group-card-hero {
    display:flex;
    background:#fff;
    border-radius:18px;
    border:1px solid rgba(0,0,0,0.06);
    box-shadow:0 10px 35px rgba(0,0,0,0.07);
    overflow:hidden;
    text-decoration:none !important;
    margin-bottom:32px;
    transition:all .35s cubic-bezier(.25,.8,.25,1);
    min-height:240px;
}
.group-card-hero:hover {
    transform:translateY(-8px);
    box-shadow:0 22px 55px rgba(0,145,190,0.13);
}
.group-card-hero-img {
    width:340px; flex-shrink:0;
    position:relative; overflow:hidden;
}
.group-card-hero-img img {
    width:100%; height:100%;
    object-fit:cover;
    transition:transform .5s ease;
}
.group-card-hero:hover .group-card-hero-img img {
    transform:scale(1.07);
}
.group-card-hero-img-placeholder {
    width:100%; height:100%; min-height:240px;
    display:flex; align-items:center; justify-content:center;
    background:linear-gradient(135deg, #0091BE, #003d55);
    color:#fff; font-size:4rem;
}
.hero-card-badge {
    position:absolute; top:14px; left:14px;
    background:#0091BE; color:#fff;
    border-radius:50px; font-size:12px; font-weight:700;
    padding:4px 14px;
    box-shadow:0 4px 14px rgba(0,145,190,0.45);
}
.hero-card-count {
    position:absolute; top:14px; right:14px;
    background:rgba(0,0,0,0.45); backdrop-filter:blur(6px);
    color:#fff; border-radius:50px;
    font-size:12px; font-weight:600; padding:3px 12px;
}
.group-card-hero-body {
    padding:32px 36px;
    display:flex; flex-direction:column;
    justify-content:center;
}
.hero-card-title {
    font-size:1.55rem; font-weight:800;
    color:#1a1a2e; margin-bottom:10px; line-height:1.3;
}
.hero-card-desc {
    font-size:14px; color:#666;
    line-height:1.75; margin-bottom:22px;
    max-width:480px;
}

/* Normal grid cards */
.gcard {
    display:block;
    background:transparent;
    border-radius:16px;
    border:none;
    box-shadow:none;
    overflow:visible;
    text-decoration:none !important;
    height:100%;
    transition:all .35s cubic-bezier(.25,.8,.25,1);
}
.gcard:hover {
    transform:translateY(-10px);
}
.gcard-img-wrap { position:relative; overflow:visible; }
.gcard-coverflow{
    height:195px;
    position:relative;
    overflow:hidden;
    background: transparent;
    perspective: 900px;
    display:flex;
    align-items:center;
    justify-content:center;
}
.gcard-coverflow::before{
    content:'';
    position:absolute;
    inset:0;
    background: none;
    pointer-events:none;
}
.gcard-cover{
    position:absolute;
    width:130px;
    height:175px;
    border-radius:8px;
    overflow:hidden;
    box-shadow:0 14px 34px rgba(0,0,0,0.45);
    border:1px solid rgba(255,255,255,0.18);
    transform-style: preserve-3d;
    animation: gcardCoverflow5 20s linear infinite;
    will-change: transform, filter, opacity;
}
.gcard-cover img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
}
.gcard-cover-1{ animation-delay: 0s; }
.gcard-cover-2{ animation-delay: -3.2s; }
.gcard-cover-3{ animation-delay: -6.4s; }
.gcard-cover-4{ animation-delay: -9.6s; }
.gcard-cover-5{ animation-delay: -12.8s; }
.gcard:hover .gcard-cover{ animation-play-state: paused; }
@keyframes gcardCoverflow5{
    0%{
        transform: translateX(-132px) rotateY(60deg) scale(0.78);
        filter: brightness(0.62) grayscale(0.25);
        opacity: 0.72;
        z-index: 0;
    }
    20%{
        transform: translateX(-76px) rotateY(45deg) scale(0.88);
        filter: brightness(0.72) grayscale(0.20);
        opacity: 0.92;
        z-index: 1;
    }
    40%{
        transform: translateX(0px) rotateY(0deg) scale(1.12) translateZ(46px);
        filter: brightness(1) grayscale(0);
        opacity: 1;
        z-index: 3;
    }
    60%{
        transform: translateX(76px) rotateY(-45deg) scale(0.88);
        filter: brightness(0.72) grayscale(0.20);
        opacity: 0.92;
        z-index: 1;
    }
    80%{
        transform: translateX(132px) rotateY(-60deg) scale(0.78);
        filter: brightness(0.62) grayscale(0.25);
        opacity: 0.72;
        z-index: 0;
    }
    100%{
        transform: translateX(-132px) rotateY(60deg) scale(0.78);
        filter: brightness(0.62) grayscale(0.25);
        opacity: 0.72;
        z-index: 0;
    }
}
.gcard-img {
    width:100%; height:195px;
    object-fit:cover;
    transition:transform .5s ease; display:block;
}
.gcard:hover .gcard-img { transform:scale(1.07); }
.gcard-img-placeholder {
    height:195px;
    display:flex; align-items:center; justify-content:center;
    background:linear-gradient(135deg, #4fc3d8, #0091BE);
    color:#fff; font-size:2.6rem;
}
.gcard-badge {
    position:absolute; top:10px; right:10px;
    background:rgba(0,0,0,0.45); backdrop-filter:blur(5px);
    color:#fff; border-radius:20px;
    font-size:11.5px; font-weight:600;
    padding:3px 10px;
    display:flex; align-items:center; gap:4px;
    z-index: 50;
}
.gcard-body {
    padding:18px 18px 18px;
    background: rgba(255,255,255,0.98);
    margin-top:0;
    border-radius:18px;
    border:1px solid rgba(0,0,0,0.06);
    box-shadow:0 10px 30px rgba(0,0,0,0.08);
    position:relative;
    display:flex;
    flex-direction:column;
    min-height: 150px;
}
.gcard:hover .gcard-body{
    box-shadow:0 22px 55px rgba(0,145,190,0.14);
    border-color:rgba(0,145,190,0.18);
}
.gcard-body::before{
    content:'';
    position:absolute;
    left:16px;
    right:16px;
    top:12px;
    height:3px;
    border-radius:999px;
    background: linear-gradient(90deg, rgba(0,145,190,0.9), rgba(126,220,245,0.7));
    opacity:0.22;
}
.gcard-title {
    font-size:16px; font-weight:800; color:#121a2b;
    margin-bottom:6px; line-height:1.35;
    display:-webkit-box; -webkit-line-clamp:2;
    -webkit-box-orient:vertical; overflow:hidden;
    padding-top:4px;
}
.gcard-desc {
    font-size:12.8px; color:rgba(18,26,43,0.68); line-height:1.65;
    margin-bottom:14px;
    display:-webkit-box; -webkit-line-clamp:2;
    -webkit-box-orient:vertical; overflow:hidden;
}
.gcard-body .mybtn{
    margin-top:auto;
    font-size:12.5px;
    padding:6px 16px;
}

@media(max-width:768px){
    .home-hero { padding: 40px 0 20px; text-align: center; }
    .home-hero-title{ font-size: 1.8rem; }
    .home-hero-desc { margin: 0 auto 20px; font-size: 13px; }
    .home-search-bar { margin: 0 auto; }
    .home-stats { justify-content: center; gap: 12px; }
    .home-stat-num { font-size: 1.3rem; }
    
    /* ปรับขนาดแถบปกสำหรับมือถือ */
    .hero-covers-sliding {
        max-width: 100%;
        height: 240px;
        margin-top: 10px;
        mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
        -webkit-mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
    }
    .cover-item {
        width: 100px;
        height: 140px;
        margin-right: -15px;
    }
    .cover-item.is-active {
        transform: perspective(1000px) rotateY(0deg) scale(1.2) translateZ(40px);
        margin-right: 25px;
        margin-left: 25px;
    }
    .gcard-coverflow{ height:180px; }
    .gcard-cover{
        width:110px;
        height:150px;
    }
    @keyframes gcardCoverflow5{
        0%{
            transform: translateX(-108px) rotateY(60deg) scale(0.78);
            filter: brightness(0.62) grayscale(0.25);
            opacity: 0.72;
            z-index: 0;
        }
        20%{
            transform: translateX(-62px) rotateY(45deg) scale(0.88);
            filter: brightness(0.72) grayscale(0.20);
            opacity: 0.92;
            z-index: 1;
        }
        40%{
            transform: translateX(0px) rotateY(0deg) scale(1.10) translateZ(40px);
            filter: brightness(1) grayscale(0);
            opacity: 1;
            z-index: 3;
        }
        60%{
            transform: translateX(62px) rotateY(-45deg) scale(0.88);
            filter: brightness(0.72) grayscale(0.20);
            opacity: 0.92;
            z-index: 1;
        }
        80%{
            transform: translateX(108px) rotateY(-60deg) scale(0.78);
            filter: brightness(0.62) grayscale(0.25);
            opacity: 0.72;
            z-index: 0;
        }
        100%{
            transform: translateX(-108px) rotateY(60deg) scale(0.78);
            filter: brightness(0.62) grayscale(0.25);
            opacity: 0.72;
            z-index: 0;
        }
    }
    .gcard-body{ padding:16px 16px 16px; min-height: 140px; }
    .gcard-body::before{ left:14px; right:14px; top:10px; }
}