/* NEWS MENU */

.news-section {
    position: absolute;
    top: 1020;
    left: 65%;
    width: 900px;
    transform: translateX(-50%);
    font-family: 'Kanit', sans-serif;
}

.news-tabs {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-bottom: 18px;
}

.news-tab {
    width: 210px;
    height: 40px;
    border: 1px solid rgba(123, 220, 255, 0.45);
    border-radius: 8px;

    background:
        linear-gradient(180deg, rgba(80, 210, 255, 0.85), rgba(8, 35, 65, 0.95)),
        radial-gradient(circle at top, rgba(255, 255, 255, 0.20), transparent 55%);

    color: #e9fbff;
    font-size: 15px;
    font-weight: bold;
    letter-spacing: 1px;
    text-shadow: 0 0 5px #00bfff, 1px 1px 3px #000;

    box-shadow:
        0 0 8px rgba(0, 190, 255, 0.35),
        inset 0 0 10px rgba(255, 255, 255, 0.08);

    cursor: pointer;
    transition: 0.25s;
}

.news-tab:hover,
.news-tab.active {
    color: #ffffff;

    background:
        linear-gradient(180deg, rgba(180, 245, 255, 0.95), rgba(0, 105, 170, 0.95)),
        radial-gradient(circle at top, rgba(255, 255, 255, 0.38), transparent 60%);

    box-shadow:
        0 0 14px rgba(120, 230, 255, 0.65),
        0 0 22px rgba(0, 150, 255, 0.35),
        inset 0 0 12px rgba(255, 255, 255, 0.16);

    transform: translateY(-2px);
}

.news-content {
    display: none;
    grid-template-columns: repeat(3, 1fr);
    grid-auto-rows: 140px;
    gap: 10px;

    padding: 16px;
    overflow: hidden;

    border: 1px solid rgba(130, 230, 255, 0.18);
    border-radius: 12px;

    background: rgba(220, 245, 255, 0.18);
    backdrop-filter: blur(6px);

    box-shadow:
        0 0 12px rgba(150, 235, 255, 0.35),
        inset 0 0 18px rgba(255, 255, 255, 0.25);
}

.news-content.active {
    display: grid;
}

.news-card {
    position: relative;
    display: none;
    height: 140px;
    overflow: hidden;

    border: 1px solid rgba(135, 225, 255, 0.38);
    border-radius: 8px;

    background: rgba(6, 25, 47, 1);

    box-shadow:
        0 0 8px rgba(0, 160, 255, 0.22),
        inset 0 0 10px rgba(255, 255, 255, 0.05);

    cursor: pointer;
    transition: 0.25s;

    text-decoration: none;
    color: inherit;
}

.news-card.show {
    display: block;
}

.news-card:hover {
    transform: translateY(-3px);

    box-shadow:
        0 0 14px rgba(120, 230, 255, 0.55),
        inset 0 0 12px rgba(255, 255, 255, 0.12);
}

.news-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 1;
    transition: 0.25s;
}

.news-card:hover img {
    opacity: 0.92;
    transform: scale(1.06);
}

.news-title {
    position: absolute;
    left: 0;
    bottom: 0;

    width: 100%;
    height: 32px;
    padding: 6px 10px;

    background: linear-gradient(90deg, rgba(0, 20, 40, 0.78), rgba(0, 120, 180, 0.48));

    color: #ffffff;
    font-size: 13px;
    font-weight: bold;
    text-shadow: 1px 1px 3px #000;

    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.news-pagination {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 14px;
}

.news-page-btn {
    min-width: 34px;
    height: 34px;

    border: 1px solid rgba(130, 230, 255, 0.28);
    border-radius: 6px;

    background: rgba(8, 20, 35, 0.26);

    color: #e9fbff;
    font-size: 13px;
    font-weight: bold;
    text-shadow: 1px 1px 3px #000;

    cursor: pointer;
    transition: 0.25s;
}

.news-page-btn:hover,
.news-page-btn.active {
    background: rgba(80, 210, 255, 0.42);

    box-shadow:
        0 0 10px rgba(0, 190, 255, 0.42),
        inset 0 0 8px rgba(255, 255, 255, 0.12);
}