/*
Theme Name: Airone
Author: nhanbt95
Description: Giao diện tối giản dành cho website giới thiệu và tổng hợp thông tin Airdrop. Hỗ trợ hiển thị danh sách chiến dịch Airdrop, liên kết mạng xã hội, và thông tin chi tiết về từng dự án một cách rõ ràng, dễ truy cập.
Requires at least: 6.7
Tested up to: 6.8
Requires PHP: 7.2
Version: 1.2
License: GNU General Public License v2 or later
License URI: Airone
Text Domain: Airone
Tags: one-column, custom-colors, custom-menu, custom-logo, editor-style, featured-images, full-site-editing, block-patterns, rtl-language-support, sticky-post, threaded-comments, translation-ready, wide-blocks, block-styles, style-variations, accessibility-ready, blog, portfolio, news
*/


/* CUSTOM CSS */

:root {
    --primary-blue: #4A6CFD;
    --positive-green: #2E9E64;
    --negative-red: #D8423F;
    --light-gray: #F0F2F5;
    --border-gray: #E8E8E8;
    --text-primary: #1C1C1E;
    --text-secondary: #8A8A8E;
    --card-shadow: 0 14px 64px 0 hsla(0, 0%, 6%, .1);
    --featured-shadow: 0 12px 30px rgba(74, 108, 253, 0.15);
    --primary-color: #0073aa;
    --table-bg: #ffffff;
    --table-border-color: #e9edf2;
    --text-primary: #1a202c;
    --text-secondary: #6c757d;
    --text-tertiary: #a0aec0;
    --hover-bg: #f7f9fc;
    --accent-green: #28a745;
    --accent-yellow: #ffc107;
}

@font-face {
    font-family: 'fontTHMedium';
    src: url('fonts/Be_Vietnam_Pro/BeVietnamPro-Medium.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'fontTHRegular';
    src: url('fonts/Be_Vietnam_Pro/BeVietnamPro-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'TablefontTH';
    src: url('fonts/Be_Vietnam_Pro/BeVietnamPro-Black.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Titlefont';
    src: url('fonts/Be_Vietnam_Pro/BeVietnamPro-Bold.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'fontNews';
    src: url('fonts/Tilt_Neon/neon.ttf') format('truetype');
}

.menu-btn {
    display: flex;
    gap: 3px;
    padding: 5px;
}

.menu-btn span {
    width: 5px;
    height: 5px;
    background-color: #ccc;
    border-radius: 50%;
    transition: background-color 0.3s ease;
}

.menu-btn:hover span {
    background-color: var(--text-dark);
}


h1,
h2,
h3,
h4,
h5,
h6,
p {
    font-family: 'Titlefont', sans-serif;
}

strong {
    font-family: 'fontTHMedium', sans-serif;
}

table {
    font-family: 'fontTHRegular', sans-serif;
}

body {
    font-family: 'fontTHRegular', sans-serif;
}


.bg-primary {
    background: linear-gradient(90deg, #3B82F6, #121597)
}

svg :not([fill=none]) {
    fill: linear-gradient(90deg, #3B82F6, #121597);
}

.uc-navbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #fff;
}

.uc-navbar-nav {
    list-style-type: none;
    display: flex;
    margin: 0;
}

.uc-navbar-right span {
    font-family: 'Titlefont';
}

.uc-navbar-nav li {
    margin-right: 20px;
    font-size: 18px;
    text-transform: uppercase;
    font-family: Titlefont
}

.uc-navbar-main {
    padding: 15px 0;
}

.uc-navbar-nav li:last-child {
    margin-right: 0;
}

.uc-navbar-nav>li:hover>a {
    color: var(--primary-color) !important;
}

a {
    text-decoration: none;
}

.wrap {
    overflow-x: hidden;
}

.marqueeee {
    background: var(--colors-background-primary);
    position: relative;
}

.marqueeee:after {
    position: absolute;
    width: 100%;
    height: 15%;
    background: #ffd200;
    content: '';
    bottom: 0;
    z-index: 1;
}

.marquee-logo {
    height: 300px;
    max-width: 300px;
    object-fit: cover;
    display: block;
    border-radius: var(--radius);
}

.marquee-custom-1 {
    transform: rotate(-2deg) translateY(-34px);
    z-index: 99;
    position: relative;
}

.marquee-custom {
    position: relative;
    transform: rotate(-2deg) translateY(-34px);
    z-index: 2;
}

.marquee-custom-3 {
    transform: rotate(-2deg);
}

#tokenomics .swiper-slide img.slide-img {
    max-height: 230px;
    min-height: 230px;
    object-fit: cover;
    width: 100%;
}

.list-social {
    display: flex;
}

.list-social li {
    margin-right: 15px;
    list-style-type: none;
}

.list-social li img {
    height: 32px;
    width: 32px;
    border-radius: 100%;

}

ul.chain {
    list-style: none;
    margin-bottom: 0;
    display: flex;
    padding: 0;
    flex-wrap: wrap;
}

ul.chain strong {
    margin-right: 10px;
}

ul.chain li {
    margin-right: 10px;
    margin-bottom: 5px;
    padding: 0 5px;
    border-radius: 5px;
}

.network-list select {
    height: 50px;

}

#pagination {
    display: flex;
    justify-content: center;
    position: absolute;
    top: 0;
    left: -50px;
    flex-direction: column;
}

#pagination.pagination {
    position: relative;
    flex-direction: row;
    width: 300px;
    left: 0;
    margin: 0 auto;
}

#pagination button {
    margin-bottom: 5px;
}

.page-btn {
    height: 40px;
    width: 40px;
    margin-right: 7px;
    transition: all ease-in-out .3s;
    font-family: 'Titlefont';
    border-radius: 7px;
}

.page-btn.active,
.page-btn:hover {
    background-color: #fcbc05;
    color: #fff;
}

#pagination button.page-btn.next-page {
    transform: rotate(90deg);
}

.page-btn.pre-page {
    transform: rotate(-90deg);
}

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

.top__content {
    display: flex;
    justify-content: space-between;
    margin-bottom: 12px;
    align-items: flex-end;
}

.filter__air {
    border-bottom-left-radius: 12px;
    border-bottom-right-radius: 12px;
    border-top-right-radius: 12px;
}

#list-air-header {
    background: url(assets/images/list-air-banner.svg) #dbf2ff;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: bottom;
    max-height: 400px;
}

.network-type-list {
    display: flex;
    align-items: center;
}

#search {
    margin: 0 auto;
    border-radius: 5px;
    padding: 10px;
    font-size: 17px;
    color: #fff;
    -webkit-text-fill-color: #fff;
    height: 46px;
    background: var(--primary-color);
    border: none;
}

#search.search__coin {
    margin: unset;
}

#airdrop-list {
    margin-bottom: 32px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

#airdrop-list h3 {
    font-size: 18px;
}

#airdrop-list .airdrop-claim-date-start {
    text-align: left;
}

#airdrop-list .airdrop-claim-date-start p {
    font-size: 16px;
}

#airdrop-list .claim-item-fund strong {
    font-size: 13px;
}

.row.col-match .top__content {
    flex: 0;
}

.section-content-airdrop {
    position: relative;
    margin-top: 0;
}

.loading-overlay {
    position: absolute;
    inset: 0;
    /* vàng nhạt */
    z-index: 10;
    display: none;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    /* để không chặn thao tác khi overlay */
}

.spinner {
    width: 48px;
    height: 48px;
    border: 6px solid #fcd34d;
    /* vàng */
    border-top: 6px solid transparent;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
    pointer-events: none;
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}


.loading-indicator {
    position: absolute;
    top: 0px;
    left: 0;
    width: 100%;
    height: 100%;
    display: none;
    background: #fff;
    border-radius: 5px;
}

.home-title {
    font-size: 35px;
    background: linear-gradient(90deg, #3B82F6, #121597);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    margin: 0;
    margin-bottom: 2rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
}


.home-title h2 {
    font-size: 35px;
    margin: 0;
}

/* Fund icons và follower icons xếp hàng ngang */
.fund-icons,
.follower-icons {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
}

/* Cá»™t Task Type */
.task-meta {
    display: flex;
    gap: 10px;
    font-size: 13px;
    color: #555;
}

.task-item.closed {
    background-color: #9c9999;
    opacity: 0.6;
    border: none;
    border-left: 4px solid red;
    border-radius: 0;
}

.task-item {

    padding: 20px;
    margin-bottom: 30px;
    border-radius: 8px;
    border: 4px solid green;

}

.fund-icons,
.follower-icons {
    display: flex;
}

.fund-icons img,
.follower-icons img {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    margin-left: -8px;
    /* Hiệu ứng xếp chồng */
    border: 2px solid #fff;
    background-color: #eee;
}

/* --- Container bao bọc bảng --- */
.airdrop-table-wrapper {
    font-family: var(--font-family-sans);
    padding: 20px;
    /* Tạo không gian xung quanh bảng */
    background-color: #f8f9fa;
    /* Màu nền nhẹ cho toàn trang */
}

.airdrop-table-container {
    width: 100%;
    background-color: var(--table-bg);
    border-radius: 12px;
    /* Bo góc mềm mại */
    box-shadow: var(--card-shadow);

    /* Đảm bảo a/hưởng bo góc cho bảng */
    border: 1px solid var(--table-border-color);
    position: relative;
    margin-bottom: 32px;
}

/* --- Cấu trúc bảng chính --- */
.airdrop-table-container table {
    width: 100%;
    border-collapse: collapse;
    text-align: left;
    /* Canh trái cho dễ đọc, sẽ canh giữa từng cột nếu cần */
    position: relative;
}

/* --- Tiêu đề bảng (Header) --- */
.airdrop-table-container th {
    padding: 16px 20px;
    background-color: #fcfcfd;
    color: var(--text-secondary);
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-bottom: 1px solid var(--table-border-color);
    text-align: center;
}

.airdrop-table-container th:first-child {
    text-align: center;
}

.airdrop-table-container th.col-name {
    text-align: left;
}

/* --- Hàng và Ô trong thân bảng (Body) --- */
.airdrop-table-container tbody tr {
    transition: background-color 0.2s ease-in-out;
}

.airdrop-table-container tbody tr:not(:last-child) {
    border-bottom: 1px solid var(--table-border-color);
}

.airdrop-table-container tbody tr:hover {
    background-color: var(--hover-bg);
}

.airdrop-table-container td {
    padding: 16px 20px;
    vertical-align: middle;
    color: var(--text-primary);
    font-size: 14px;
    font-weight: 500;
}

/* --- Wrapper nội dung trong ô để căn chỉnh bằng Flexbox --- */
.cell-content,
.cell-content-stack {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
}

.cell-content-stack {
    flex-direction: column;
    gap: 4px;
}

/* --- Kiểu cho từng cột cụ thể --- */

/* Cá»™t # */
.col-index {
    text-align: center;
    color: var(--text-secondary);
    font-weight: 600;
    width: 50px;
}

/* Cột Tên Dự Án */
.col-name .cell-content {
    justify-content: flex-start;
    /* Canh trái cho cột tên */
}

.col-name a {
    text-decoration: none;
    color: inherit;
    display: flex;
    align-items: center;
    gap: 12px;
}

.coin-icon {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    object-fit: cover;
}

.project-info {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.project-name {
    font-weight: 600;
    font-size: 15px;
}

.coin-symbol {
    color: var(--text-secondary);
    text-transform: uppercase;
    font-size: 12px;
}

/* Cột Loại Nhiệm vụ */
.col-task .task-types {
    white-space: nowrap;
}

.col-task .task-meta {
    display: flex;
    gap: 12px;
    font-size: 12px;
    color: var(--text-secondary);
}

.col-task .task-meta strong {
    color: var(--text-primary);
    font-weight: 600;
}

/* Cột Trạng Thái */
.status-label {
    font-size: 13px;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 12px;
}

.status-confirmed {
    background-color: #e6f6e9;
    color: #2b7d42;
}

.status-potential {
    background-color: #fff8e1;
    color: #b48c00;
    white-space: nowrap;
}

.status-date {
    font-size: 12px;
    color: var(--text-secondary);
}

/* Cột Phần thưởng */
.col-reward .cell-content {
    font-weight: 600;
}

/* Cột Quỹ và Người theo dõi (chung kiểu icon xếp chồng) */
.icon-stack {
    display: flex;
    padding-left: 12px;
    /* Tạo khoảng trống cho icon đầu tiên */
}

.icon-stack img {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 3px solid var(--table-bg);
    margin-left: -12px;
    /* Kéo icon lại để xếp chồng */
    background-color: #f0f0f0;
}

.airdrop-table-container tbody tr:hover .icon-stack img {
    border-color: var(--hover-bg);
    /* Đổi màu viền khi hover */
}

.col-funds strong,
.col-followers strong,
.col-xscore strong {
    font-size: 15px;
    font-weight: 600;
    min-width: 50px;
    /* Đảm bảo số không bị nhảy dòng */
    text-align: right;
}

/* Cột Điểm X */
.col-xscore .cell-content {
    gap: 10px;
}

.score-bar {
    width: 80px;
    height: 6px;
    background-color: #e9ecef;
    border-radius: 3px;
    overflow: hidden;
}

.score-progress {
    height: 100%;
    background: linear-gradient(90deg, var(--accent-yellow), var(--accent-green));
    border-radius: 3px;
    transition: width 0.5s ease;
}

.topairSwiper,
.topfundSwiper {
    height: 150px;
    width: 100%;
}

.trendairSwiper {
    height: 1050px;
}

.trendairSwiper .airdrop-claim-item {
    justify-content: space-around;
    width: 100%;
}

.airdrop-claim-link-wrapper {
    margin-right: 0;
}

.airdrop-claim-item {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
    padding: 15px;
    border-radius: 10px;
    width: 32.3%;
    margin-bottom: 16px;
}

.topairSwiper .airdrop-claim-item {
    width: 100%;
}

.airdrop-claim-header h3 {
    font-size: 24px;
}

.airdrop-claim-header {
    display: flex;
    align-items: center;
    gap: 12px;
}

.claim-item-fund strong {
    margin-right: 15px;
}

.crypto-widget {
    background-color: white;
    border-radius: 24px;
    padding: 24px 32px;
    box-shadow: var(--card-shadow);
    width: 100%;
    margin-bottom: 3rem;
}

.crypto-nav {
    display: flex;
    padding-bottom: 16px;
    margin-bottom: 24px;
    border-bottom: 1px solid var(--border-gray);
    overflow-x: auto;
    /* Cho phép cuộn ngang trên màn hình nhỏ */
}

.crypto-nav ul {
    display: flex;
    list-style: none;
    padding: 0;
    margin: 0;
    gap: 16px;
    font-family: Titlefont;
    width: 100%;
    justify-content: space-between;
}

.crypto-nav li a {
    text-decoration: none;
    font-size: 17px;
    padding: 8px 18px;
    border-radius: 12px;
    white-space: nowrap;
    transition: all 0.2s ease-in-out;
    display: block;
}

.crypto-nav li a.active {
    background-color: var(--primary-blue);
    color: white;
}

.task-description img {
    width: 100%;
    object-fit: contain;
}

.crypto-cards {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.crypto-card:first-child {
    width: 34%;
}

.crypto-card:last-child {
    width: 65%;
}

.topfundSwiper .swiper-slide {
    width: 400px;
    flex-shrink: 0;
}

.crypto-card {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 16px;
    transition: all 0.3s ease;
}

.crypto-card.featured {
    background-color: white;
    border-radius: 20px;
    box-shadow: var(--featured-shadow);
    position: relative;

    /* Làm cho thẻ nổi bật to hơn một chút */
    z-index: 10;
}

.topfundSwiper .airdrop-claim-item {
    padding: 15px;
    border-radius: 10px;
    width: 100%;
}

.airdropsvietnam_tree_post {
    position: sticky;
    left: 3rem;
    top: 2rem;
}

.airdropsvietnam_tree_post ul {}

.airdropsvietnam_tree_post ul {
    list-style: none;
    text-align: center;
    font-size: 22px;
    padding: 0 7px;
    background: #f7e4a5;
    border-radius: 5px;
}

.airdropsvietnam_tree_post ul li span img {
    height: 23px;
}

.airdropsvietnam_tree_post ul li span {
    font-size: 2rem;
}

.airdrop-title-detail {
    display: flex;
    align-items: center;
}

.relative-sidebar {
    width: 28%;
}

.airdrop-title-detail h3 {
    width: 28%;
    font-size: 28px;
    background: linear-gradient(90deg, #3B82F6, #121597);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    margin: 10px 0;
}

.airdrop-claim-details {
    display: flex;
    justify-content: space-between;
    align-items: center;
}


.description-footer,
.uc-footer-content li {
    font-family: 'Titlefont', sans-serif;
}

.autoplay-progress span {
    color: #fff;
    z-index: 20;
}

.autoplay-progress {
    position: absolute;
    right: 0;
    top: 0;
    z-index: 10;
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    color: var(--swiper-theme-color);
}

.autoplay-progress svg {
    --progress: 0;
    position: absolute;
    left: 0;
    top: 0px;
    z-index: 10;
    width: 100%;
    height: 100%;
    stroke-width: 4px;
    stroke: var(--colors-background-primary);
    fill: none;
    stroke-dashoffset: calc(125.6px * (1 - var(--progress)));
    stroke-dasharray: 125.6;
    transform: rotate(-90deg);
}

.swiper-button-next-vertical-fund {
    position: absolute;
    top: 50%;
    right: 10px;
    transform: translateY(-50%);
    width: 48px;
    height: 48px;
    background-color: #ffffffcc;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.swiper-button-prev-vertical-fund {
    position: absolute;
    top: 50%;
    left: 10px;
    transform: translateY(-50%);
    width: 48px;
    height: 48px;
    background-color: #ffffffcc;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
}

#list_news {
    box-shadow: var(--card-shadow);
    border-radius: 24px;
    padding: 1rem;
}


/* ===== FOOTER ===== */
.site-footer-main {
    background-color: var(--dark-text);
    color: #ccc;
    margin-top: 4rem;
    padding: 4rem 2rem 1rem;
    /* Adjust padding */
    margin-left: calc(-50vw + 50%);
    /* Center the background */
    margin-right: calc(-50vw + 50%);
}



/* ===================================================================
   TRANG TIN TỨC TỔNG HỢP - MỚI
   =================================================================== */

/* --- Cấu trúc chung của trang --- */
.news-page-container {
    max-width: 1280px;
    margin: 0 auto;
}

.section-title {
    font-family: 'fontNews';
    font-size: 2rem;
    color: var(--text-primary);
    background: linear-gradient(90deg, red, #ffd200);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    margin: 0;
}

.ad-label {
    display: block;
    font-size: 12px;
    color: var(--text-secondary);
    margin-bottom: 8px;
    text-align: center;
}

/* --- Phần 1: MOST READ THIS WEEK --- */
.most-read-section,
.main-feed-section {
    margin-bottom: 4rem;
    box-shadow: var(--card-shadow);
    padding: 0 1.5rem 2rem;
    border-radius: 1rem;
}

.title-header-news {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.5rem 0;
    border-bottom: 2px solid #333;
    margin-bottom: 2rem;
}

.date-news {
    background: linear-gradient(90deg, #3B82F6, #121597);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    position: relative;
}

.date-news:before {
    content: '';
    height: 30px;
    width: 30px;
    background: linear-gradient(90deg, red, #ffd200);
    position: absolute;
    left: -2.5rem;
    top: 50%;
    transform: translateY(-50%);
    border-radius: 50%;
    animation: pulse 1.5s infinite;
}

@keyframes pulse {
    0% {
        transform: scale(.7) translateY(-50%);
        opacity: .7;
    }

    50% {
        transform: scale(.8) translateY(-50%);
        opacity: 0.8;
    }

    50% {
        transform: scale(.9) translateY(-50%);
        opacity: 0.9;
    }

    100% {
        transform: scale(1) translateY(-50%);
        opacity: 1;
    }
}

.date-news span,
.date-news strong {
    font-family: 'fontNews';
}

.most-read-wrapper {
    display: grid;
    grid-template-columns: 280px 1fr;
    /* Sidebar trái và lưới chính */
    gap: 30px;
}

.advertisement-sidebar-left .ad-image {
    width: 100%;
    border: 1px solid var(--border-gray);
    padding: 1rem;
    border-radius: 8px;
}

.posts-grid-top {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    /* 3 cột cho 3 bài nhỏ */
    gap: 30px;
}

/* Style chung cho các thẻ bài viết */
.post-category {
    display: inline-block;
    padding: 5px 12px;
    border-radius: 5px;
    text-transform: uppercase;
    background-color: #0073aa;
    color: #fff;
    font-family: 'fontNews';
}

.meta-date {
    font-family: 'fontNews';
    color: var(--primary-color);
}

a.post-category:hover {
    color: #fff;
}

.post-title {
    font-family: 'fontNews', sans-serif;
    margin: 0 0 0.75rem 0;
    font-size: 3rem;
    color: var(--primary-color);
}

.post-title a {
    color: var(--text-primary);
    text-decoration: none;
    font-family: 'fontNews';
    transition: color 0.3s;
}

.post-title a:hover {
    color: var(--primary-color);
}

.post-excerpt {
    font-family: 'fontTHRegular', sans-serif;
    color: var(--text-secondary);
    font-size: 15px;
    line-height: 1.6;
    margin-bottom: 1rem;
}

.post-meta {
    justify-content: space-between;
    display: flex;
    align-items: center;
    font-size: 15px;
    color: var(--text-secondary);
    font-family: 'fontNews';
}

.post-author {
    font-family: 'fontNews';
    color: var(--text-primary);
}

.post-save-icon {
    margin-left: auto;
    color: var(--text-secondary);
    font-size: 18px;
}

/* Bài viết nổi bật (lớn) */
.post-card-featured {
    grid-column: 1 / -1;
    /* Trải dài hết 3 cột */
    display: flex;
    gap: 30px;
    border-bottom: 1px solid var(--border-gray);
    padding-bottom: 2rem;
}

.post-card-featured .post-content {
    flex: 1;
}

.post-card-featured .post-content p {
    font-family: fontNews;
    font-size: 17px;
}

.post-card-featured .post-image {
    flex-basis: 55%;
    position: relative;
}

.post-card-featured .post-image a {
    position: absolute;
    left: 1rem;
    top: 1rem;
    z-index: 99999999;
}

.post-card-featured .post-image img {
    width: 100%;
    /* height: 100%; */
    object-fit: cover;
    border-radius: 8px;
}

.post-card-featured .post-title {
    font-size: 32px;
    line-height: 1.2;
}

/* 3 bài viết nhỏ */
.post-card-small {
    position: relative;
    border: 1px solid var(--border-gray);
    padding: 1rem;
    border-radius: 8px;
}

.post-card-small:after {
    background: #0304234f;
    height: 100%;
    width: 100%;
    position: absolute;
    content: '';
    top: 0;
    left: 0;
    z-index: 0;
}

.post-card-small .post-category {
    position: relative;
    margin-bottom: 1rem;
    left: 0;
    top: 0;
}

.post-card-small .post-category:hover {
    color: #fff;
}

.post-card-small .post-title {
    font-size: 18px;
    line-height: 1.4;
    margin-bottom: 2rem;
    /* Tạo khoảng trống cho meta */
    z-index: 1;
    position: relative;
}

.post-card-small .post-title a {
    color: #fff;
    font-family: 'fontNews';
    margin-bottom: 1rem;
}

.post-card-small .post-meta {
    z-index: 1;
}

.post-card-small .post-meta .post-author span,
.post-card-small .post-meta .post-author {
    color: #fff;
    font-family: 'fontNews';
    font-size: 13px;
}

/* --- CSS Bổ sung cho Phân trang Tin tức --- */

/* Hiệu ứng loading */
.posts-grid-top.loading-news {
    opacity: 0.5;
    transition: opacity 0.3s ease-in-out;
    position: relative;
    min-height: 300px;
    /* Giữ chiều cao trong khi load */
}

.posts-grid-top.loading-news::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 40px;
    height: 40px;
    margin: -20px 0 0 -20px;
    border: 4px solid var(--border-gray);
    border-top-color: var(--primary-color);
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

/* Kiểu cho các nút phân trang mới */
.pagination-news {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    margin-top: 3rem;
}

.pagination-news a,
.pagination-news span {
    font-family: 'fontNews';
    color: var(--text-primary);
    padding: 8px 15px;
    border-radius: 5px;
    border: 1px solid var(--border-gray);
    text-decoration: none;
    transition: all 0.3s;
    font-size: 1.1rem;
}

.pagination-news a:hover,
.pagination-news a.active {
    background-color: var(--primary-color);
    color: #fff;
    border-color: var(--primary-color);
}

.pagination-news .pagination-ellipsis {
    border: none;
    padding: 8px 5px;
}

.title-header-news {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    flex-wrap: wrap;
    /* Cho responsive */
    border-bottom: 2px solid var(--border-gray);
    padding-bottom: 1rem;
    margin-bottom: 2rem;
}

.title-header-news .section-title {
    margin: 0;
    padding: 0;
    border: none;
}

.date-news {
    font-family: 'fontTHRegular', sans-serif;
    color: var(--text-secondary);
}

.date-news strong {
    font-family: 'fontTHMedium', sans-serif;
    color: var(--text-primary);
}

/* --- Phần 2: JUST FOR YOU --- */
.main-feed-wrapper {
    display: flex;
    gap: 30px;
    align-items: flex-start;
    /* Quan trọng để sidebar sticky hoạt động đúng */
}

.main-content-feed {
    flex: 1;
    /* Chiếm hết không gian còn lại */
    min-width: 0;
    /* Fix lá»—i flexbox */
}

/* Bài viết dạng ngang */
.post-card-horizontal {
    display: flex;
    gap: 20px;
    margin-bottom: 2.5rem;
    position: relative;
}

article.post-card-horizontal .post-category {
    position: absolute;
    left: 1rem;
    top: 1rem;
}

.post-card-horizontal .post-image {
    flex-basis: 300px;
    flex-shrink: 0;
    position: relative;
}

.post-card-horizontal .post-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 8px;
}

.post-card-horizontal .post-title {
    font-size: 22px;
    margin-top: 0;
}

.post-card-horizontal .post-meta {
    margin-top: 1rem;
}

/* Nút Load More */
.load-more-container {
    text-align: center;
    margin-top: 1rem;
}

.btn-load-more {
    font-family: 'Titlefont', sans-serif;
    font-size: 16px;
    background-color: var(--primary-color);
    color: #fff;
    border: none;
    padding: 12px 40px;
    border-radius: 8px;
    cursor: pointer;
    transition: background-color 0.3s;
}

.btn-load-more:hover {
    background-color: #0d107a;
    /* Màu đậm hơn của --primary-color */
}

/* Sidebar bên phải (Sticky) */
.sidebar-right-sticky {
    width: 320px;
    flex-shrink: 0;
    position: sticky;
    top: 20px;
    /* Khoảng cách dính so với top */
}

.widget {
    margin-bottom: 2rem;
    padding: 1.5rem;
    border: 1px solid var(--border-gray);
    border-radius: 8px;
}

.widget-title {
    font-family: 'Titlefont', sans-serif;
    font-size: 18px;
    margin: 0 0 1.5rem 0;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--border-gray);
}

.advertisement-widget .ad-image {
    width: 100%;
}

.mini-games-widget ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.mini-games-widget li {
    margin-bottom: 1.5rem;
}

.mini-games-widget li:last-child {
    margin-bottom: 0;
}

.mini-games-widget li a {
    display: flex;
    align-items: center;
    gap: 15px;
    text-decoration: none;
}

.mini-games-widget li img {
    width: 50px;
    height: 50px;
    flex-shrink: 0;
}

.mini-games-widget .game-info h4 {
    font-family: 'Titlefont', sans-serif;
    font-size: 16px;
    color: var(--text-primary);
    margin: 0 0 4px 0;
}

.mini-games-widget .game-info p {
    font-family: 'fontTHRegular', sans-serif;
    font-size: 14px;
    color: var(--text-secondary);
    line-height: 1.4;
    margin: 0;
}

/* ===================================================================
   BỔ SUNG HIỆU ỨNG TƯƠNG TÁC VÀ SIDEBAR
   =================================================================== */

/* --- 1. Hiệu ứng Hover cho các thẻ bài viết --- */

/* Hiệu ứng chung cho ảnh khi hover */
.post-card-featured .post-image img,
.post-card-small,
.post-card-horizontal .post-image img {
    transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94),
        box-shadow 0.4s ease;
}

/* Khi hover vào thẻ, ảnh sẽ phóng to nhẹ */
.post-card-featured:hover .post-image img,
.post-card-small:hover,
.post-card-horizontal:hover .post-image img {
    transform: scale(1.03);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
}

/* Làm mờ overlay của bài viết nhỏ khi chưa hover */
.post-card-small {
    position: relative;
    color: white;
    overflow: hidden;
    /* Quan trọng để hiệu ứng hoạt động đúng */
}

.post-card-small>* {
    position: relative;
    z-index: 2;
    /* Đảm bảo nội dung luôn nằm trên overlay */
}

/* Khi hover, overlay sẽ mờ đi một chút để ảnh nền rõ hơn */
.post-card-small:hover::before {
    opacity: 0.8;
}

/* Hiệu ứng cho tiêu đề khi hover */
.post-title a {
    background-image: linear-gradient(var(--primary-color), var(--primary-color));
    background-position: 0% 100%;
    background-repeat: no-repeat;
    background-size: 0% 2px;
    transition: background-size .3s;
}

.post-title a:hover {
    background-size: 100% 2px;
}

/* Hiệu ứng cho nút "Load More" và Phân trang */
.btn-load-more,
.pagination-news a {
    transition: all 0.3s ease;
}

.btn-load-more:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 15px rgba(18, 21, 151, 0.2);
}


/* --- 2. CSS cho Sidebar dính lại khi cuộn (Sticky/Fixed) --- */

.main-feed-wrapper {
    /* Quan trọng: Cần `align-items: flex-start` để sidebar tính toán vị trí đúng */
    align-items: flex-start;
}

.sidebar-right-sticky {
    /*
     * `position: sticky` là cách hiện đại và mượt mà nhất.
     * `top: 100px` là khoảng cách từ đỉnh màn hình khi sidebar bắt đầu dính lại.
     * Bạn có thể điều chỉnh 100px cho phù hợp với chiều cao header của bạn.
     */
    position: -webkit-sticky;
    /* Cho Safari */
    position: sticky;
    top: 100px;
}

/* ===================================================================
   BỔ SUNG CSS CHO TRANG CHI TIẾT BÀI VIẾT
   =================================================================== */

/* --- Cấu trúc chung của nội dung bài viết --- */
.entry-content {
    padding-top: 2rem;
    color: var(--text-primary);
    line-height: 1.7;
}

.entry-content p,
.entry-content li {
    font-family: 'fontNews';
    font-size: 17px;
    margin-bottom: 1.5rem;
}

p.cn-block-disclaimer__content {
    font-weight: bold;
    color: var(--primary-color);
}

.entry-content h2,
.entry-content h3,
.entry-content h4 {
    font-family: 'Titlefont', sans-serif;
    color: var(--text-primary);
    margin-top: 2.5rem;
    margin-bottom: 1.5rem;
    line-height: 1.3;
}

.entry-content h2 {
    font-size: 32px;
}

.entry-content h3 {
    font-size: 24px;
}

.entry-content h4 {
    font-size: 20px;
}

.entry-content strong {
    font-family: 'fontTHMedium', sans-serif;
    color: #000;
}

.entry-content a {
    color: var(--primary-blue);
    text-decoration: underline;
    font-weight: 600;
}

.entry-content a:hover {
    color: var(--primary-color);
}


/* --- Hình ảnh trong bài viết --- */
.entry-content .wp-block-image {
    margin: 2rem 0;
}

.entry-content .wp-block-image img {
    width: 100%;
    height: auto;
    border-radius: 12px;
    border: 1px solid var(--border-gray);
}

.entry-content .wp-block-image figcaption {
    text-align: center;
    font-size: 14px;
    color: var(--text-secondary);
    margin-top: 0.75rem;
}

/* --- Định dạng danh sách các bước tham gia (How-to) --- */
.step-list {
    list-style-type: none;
    counter-reset: step-counter;
    padding-left: 0;
}

.step-list>li {
    counter-increment: step-counter;
    position: relative;
    padding-left: 45px;
    margin-bottom: 1.5rem;
}

.step-list>li::before {
    content: counter(step-counter);
    position: absolute;
    left: 0;
    top: 0;
    width: 32px;
    height: 32px;
    background-color: var(--primary-blue);
    color: white;
    font-family: 'Titlefont', sans-serif;
    font-size: 16px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

/* --- Định dạng danh sách con (sub-list) bên trong các bước --- */
.step-list ul {
    list-style-type: '– ';
    /* Dấu gạch ngang đầu dòng */
    padding-left: 25px;
    margin-top: 1rem;
    border-left: 3px solid var(--light-gray);
}

.step-list ul li {
    padding-left: 10px;
    margin-bottom: 1rem;
    font-size: 16px;
}

.step-list ul ul {
    list-style-type: '• ';
    /* Dấu chấm tròn cho cấp sâu hơn */
    margin-top: 0.5rem;
}


/* --- Các Section trong bài viết --- */
.airdrop-section,
.conclusion-section {
    padding-top: 1rem;
    margin-bottom: 2rem;
    border-bottom: 1px dashed var(--border-gray);
}

.airdrop-section:last-of-type {
    border-bottom: none;
}

/* =================================================================
   SIDEBAR TOP COINS WIDGET
   ================================================================= */
.sidebar-widget.top-coins-widget {
    background-color: #fff;
    border: 1px solid #eef0f2;
    border-radius: 12px;
    padding: 10px 15px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

.top-coins-widget .widget-title {
    margin-top: 5px;
    margin-bottom: 15px;
    font-size: 18px;
    color: #1a202c;
}

.top-coins-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.top-coin-item {
    margin-bottom: 5px;
}

.top-coin-item:last-child {
    margin-bottom: 0;
}

.top-coin-link {
    display: flex;
    align-items: center;
    padding: 10px;
    border-radius: 8px;
    transition: background-color 0.2s ease-in-out, transform 0.2s ease-in-out;
    text-decoration: none;
}

.top-coin-link:hover {
    background-color: #f7f8fa;
    transform: translateX(5px);
}

.top-coin-item .coin-icon {
    flex-shrink: 0;
    margin-right: 12px;
}

.top-coin-item .coin-icon img {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
}

.top-coin-item .coin-info {
    flex-grow: 1;
}

.top-coin-item .coin-name {
    font-size: 16px;
    font-weight: 600;
    color: #2d3748;
    margin: 0 0 2px 0;
}

.top-coin-item .coin-raised {
    font-size: 13px;
    color: #718096;
    font-weight: 500;
}

.top-coin-item .coin-metric {
    text-align: right;
    flex-shrink: 0;
    margin-left: 10px;
}

.top-coin-item .metric-value {
    display: block;
    font-size: 16px;
    font-weight: 700;
    color: #4A5568;
}

.top-coin-item .metric-label {
    display: block;
    font-size: 11px;
    color: #a0aec0;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* ===================================================================
   CSS CHO BỐ CỤC BÀI VIẾT, SIDEBAR VÀ MỤC LỤC
   =================================================================== */


.cn-block-related-link {
    display: none;
}

/* Bật chế độ cuộn mượt cho toàn trang */
html {
    scroll-behavior: smooth;
}

/* --- Bố cục chính cho bài viết và sidebar --- */
.post-layout {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
    /* Quan trọng để sidebar sticky hoạt động đúng */
}

.site-main {
    flex: 1;
    /* Chiếm hết không gian còn lại */
    min-width: 0;
    /* Sửa lỗi tràn của flexbox */
}

/* Tùy chỉnh CSS cho Breadcrumbs */
.breadcrumb-style {
    margin: 15px 0;
    /* Khoảng cách trên dưới */
    background-color: #f8f8f8;
    /* Màu nền */
    padding: 10px 0;
    /* Đệm trong */
    border-bottom: 1px solid #eee;
    /* Đường viền dưới */
    margin-top: 0;
}

.breadcrumb-style .container {
    max-width: 1200px;
    /* Chiều rộng tối đa, chỉnh theo layout theme của bạn */
    margin: 0 auto;
    /* Căn giữa */
    padding: 0 15px;
    /* Đệm hai bên */
}

.crumbs {
    list-style: none;
    /* Bỏ dấu chấm đầu dòng */
    margin: 0;
    padding: 0;
    display: flex;
    /* Dùng flexbox để sắp xếp ngang hàng */
    flex-wrap: wrap;
    /* Cho phép xuống dòng nếu quá dài */
    font-size: 0.9em;
}

.crumbs li {
    display: inline-flex;
    /* Đảm bảo item là inline và có thể dùng flexbox nội tại */
    align-items: center;
    /* Căn giữa các icon/text */
    font-size: 14px;
    font-family: 'fontNews';
}

.crumbs li:last-child {
    color: #979297;
}

.crumbs a {
    text-decoration: none;
    color: #0073aa;
    /* Màu liên kết */
}

.crumbs a:hover {
    text-decoration: underline;
    color: #005177;
}

.crumbs .delimiter {
    padding: 0 8px;
    /* Khoảng cách xung quanh dấu phân cách */
    color: #666;
    user-select: none;
    /* Ngăn chọn văn bản cho delimiter */
}

.crumbs .current {
    color: #333;
    /* Màu của mục hiện tại */
    font-weight: bold;
}

/* Icon Font Awesome */
.crumbs .fa-home {
    margin-right: 5px;
}

.itemListElement:last-child {
    white-space: break-spaces;
}

/* --- Sidebar Dính Lại Khi Cuộn --- */
.sidebar-right-sticky {
    width: 300px;
    /* Chiều rộng cố định */
    flex-shrink: 0;
    position: -webkit-sticky;
    /* Cho Safari */
    position: sticky;
    top: 20px;
    /* Khoảng cách từ đỉnh màn hình khi dính lại */
}

/* =================================================================
   SIDEBAR RELATED NEWS WIDGET
   ================================================================= */
.sidebar-widget.related-news-widget {
    background-color: #fff;
    border: 1px solid #eef0f2;
    border-radius: 12px;
    padding: 15px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

.related-news-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.related-news-item {
    margin-bottom: 12px;
}

.related-news-item:hover .news-title {
    color: var(--primary-color);
}

.related-news-item:last-child {
    margin-bottom: 0;
}

.related-news-link {
    display: flex;
    align-items: center;
    text-decoration: none;
    transition: opacity 0.2s ease;
}

.related-news-link:hover {
    opacity: 0.85;
}

.related-news-item .news-thumbnail {
    flex-shrink: 0;
    margin-right: 15px;
}

.related-news-item .news-thumbnail img {
    width: 65px;
    height: 65px;
    border-radius: 8px;
    object-fit: cover;
}

.related-news-item .news-info {
    flex-grow: 1;
}

.related-news-item .news-title {
    font-size: 15px;
    font-weight: 600;
    color: #2d3748;
    margin: 0 0 4px 0;
    line-height: 1.4;
    /* Giới hạn 2 dòng */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

.related-news-item .news-date {
    font-size: 13px;
    color: #718096;
}

/* --- Kiểu chung cho Widget --- */
.widget {
    background-color: #fff;
    border: 1px solid var(--border-gray, #E8E8E8);
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 20px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
}

.widget-title {
    font-family: 'Titlefont', sans-serif;
    font-size: 18px;
    margin: 0 0 1rem 0;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--border-gray, #E8E8E8);
}

/* --- Widget: Tin xem nhiều --- */
.most-viewed-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.most-viewed-list li {
    margin-bottom: 15px;
}

.most-viewed-list li:last-child {
    margin-bottom: 0;
}

.most-viewed-list a {
    display: flex;
    align-items: center;
    gap: 15px;
    text-decoration: none;
    color: var(--text-primary, #1C1C1E);
}

.most-viewed-list a:hover h4 {
    color: var(--primary-blue, #4A6CFD);
}

.most-viewed-list img {
    width: 60px;
    height: 60px;
    border-radius: 8px;
    object-fit: cover;
    flex-shrink: 0;
}

.most-viewed-list .post-info h4 {
    margin: 0;
    font-family: 'fontTHMedium', sans-serif;
    font-size: 16px;
    line-height: 1.4;
    transition: color 0.3s;
}

/* --- Widget: Quảng cáo --- */
.promo-widget {
    padding: 0;
    overflow: hidden;
    /* Đảm bảo ảnh không tràn ra ngoài border-radius */
}

.promo-widget img {
    width: 100%;
    display: block;
    /* Bỏ khoảng trống dưới ảnh */
}

/* --- Widget: Đăng ký --- */
.subscribe-widget {
    background-color: #f0f2f5;
    /* Màu nền khác biệt */
    text-align: center;
}

.subscribe-widget h4 {
    font-family: 'fontTHMedium', sans-serif;
    font-size: 16px;
    line-height: 1.5;
    margin: 0 0 1rem 0;
}

.btn-subscribe {
    display: inline-block;
    background-color: #F97316;
    /* Màu cam */
    color: white;
    padding: 12px 24px;
    border-radius: 8px;
    text-decoration: none;
    font-family: 'Titlefont', sans-serif;
    font-weight: 600;
    transition: background-color 0.3s;
}

.btn-subscribe:hover {
    background-color: #EA580C;
    /* Màu cam đậm hơn */
}

/* --- Nút Liên hệ nổi --- */
.floating-contact-btn {
    position: fixed;
    bottom: 30px;
    right: 30px;
    width: 60px;
    height: 60px;
    background-color: #F97316;
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    box-shadow: 0 8px 15px rgba(249, 115, 22, 0.3);
    z-index: 1000;
    transition: transform 0.3s, box-shadow 0.3s;
}

.floating-contact-btn:hover {
    transform: scale(1.1);
    box-shadow: 0 12px 25px rgba(249, 115, 22, 0.4);
}

/* --- CSS cho Mục lục --- */
.post-header {
    position: relative;
    /* Làm gốc để định vị dropdown */
}

.table-of-contents {
    margin-left: auto;
    border: 1px solid var(--border-gray, #E8E8E8);
    padding: 8px 16px;
    border-radius: 8px;
    cursor: pointer;
    font-family: 'fontTHMedium', sans-serif;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: background-color 0.3s;
    user-select: none;
    /* Ngăn bôi đen chữ khi click */
}

.table-of-contents:hover {
    background-color: var(--light-gray, #F0F2F5);
}

.table-of-contents .fa-caret-down {
    transition: transform 0.3s ease-in-out;
}

.toc-dropdown-container {
    display: none;
    /* Ẩn mặc định */
    position: absolute;
    top: calc(100% - 1.5rem);
    /* Đặt ngay dưới header */
    right: 0;
    width: 320px;
    background: #fff;
    border-radius: 8px;
    border: 1px solid var(--border-gray, #E8E8E8);
    box-shadow: var(--card-shadow, 0 14px 64px 0 hsla(0, 0%, 6%, .1));
    z-index: 100;
    padding: 10px;
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 0.3s, transform 0.3s;
}

.toc-dropdown-container.is-open {
    display: block;
    /* Hiện ra khi có class is-open */
    opacity: 1;
    transform: translateY(0);
}

.toc-dropdown-container ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.toc-dropdown-container ul li a {
    display: block;
    padding: 10px 15px;
    text-decoration: none;
    color: var(--text-primary);
    font-family: 'fontTHRegular', sans-serif;
    border-radius: 6px;
    transition: background-color 0.2s;
}

.toc-dropdown-container ul li a:hover {
    background-color: var(--light-gray, #F0F2F5);
    color: var(--primary-blue, #4A6CFD);
}

@media(max-width:1400px) {

    th:nth-child(3),
    td.col-task,
    th:nth-child(5),
    td.col-reward {
        display: none;

    }
}

/* --- Responsive (Thêm vào phần @media có sẵn) --- */
@media (max-width: 1024px) {
    .post-layout {
        flex-direction: column;
        /* Xếp sidebar xuống dưới trên tablet */
    }

    .sidebar-right-sticky {
        width: 100%;
        position: static;
        /* Bỏ sticky */
        margin-top: 3rem;
    }
}

@media (max-width: 767px) {


    .table-of-contents {
        margin-left: 0;
        margin-top: 1rem;
        width: 100%;
        justify-content: center;
    }

    .toc-dropdown-container {
        width: 100%;
        top: calc(100% + 1rem);
        /* Điều chỉnh vị trí trên mobile */
    }
}

.featured-image img {
    width: 100%;
    height: auto;
    border-radius: 12px;
    border: 1px solid var(--border-gray);
}


/* ===================================================================
   RESPONSIVE CHO TRANG TIN TỨC
   =================================================================== */

/* Tablet */
@media (max-width: 1024px) {
    .most-read-wrapper {
        grid-template-columns: 1fr;
        /* Sidebar trái xuống dưới */
    }

    .advertisement-sidebar-left {
        order: 2;
        /* Chuyển sidebar xuống dưới lưới bài viết */
        margin-top: 2rem;
        max-width: 500px;
        margin-left: auto;
        margin-right: auto;
    }

    .posts-grid-top {
        order: 1;
    }

    .post-card-featured {
        flex-direction: column;
    }

    .post-card-featured .post-image {
        height: 300px;
    }

    .main-feed-wrapper {
        flex-direction: column;
    }

    .sidebar-right-sticky {
        width: 100%;
        position: static;
        /* Bỏ sticky trên tablet */
        margin-top: 3rem;
    }

    .post-card-horizontal .post-image {
        flex-basis: 220px;
    }
}

/* Mobile */
@media (max-width: 767px) {
    .posts-grid-top {
        grid-template-columns: 1fr;
    }

    .post-card-featured .post-title {
        font-size: 24px;
    }

    .post-card-horizontal {
        flex-direction: column;
    }

    .post-card-horizontal .post-image {
        height: 200px;
    }
}

/* RESPONSIVE STYLES for smaller screens */
@media (max-width: 992px) {

    .title-category {
        font-size: 35px;
    }

    .airdrop-claim-item {
        width: 49%;
    }

    .uc-logo img {
        width: 151px;
    }

    .post-header {
        width: 100%;
    }

    .airdrop-title-detail h3 {
        display: none;
    }

    .site-main {
        flex-wrap: wrap;
        flex-direction: column-reverse;
    }


    #pagination {
        top: calc(100% + 32px);
        flex-direction: row;
        left: 50%;
        transform: translateX(-50%);
    }

    .swiper-button-next {
        right: -58px;
    }

    .swiper-button-prev {
        left: -58px;
    }

    .uc-navbar-center {
        display: none;
    }

    .post-content-wrapper {
        grid-template-columns: 1fr;
    }

    .about-widget {
        grid-column: 1 / -1;
    }

    .crypto-cards {
        display: block;
    }

    .crypto-card:first-child {
        width: 100%;
        margin-bottom: 18px;
    }

    .crypto-card:last-child {
        width: 100%;
    }

    .home-title h2 {
        display: none;
    }

    .hero-header .container {
        padding-bottom: 90px;
    }

    /* Ẩn các cột phụ bớt rối */
    th:nth-child(1),
    td.col-index,
    th:nth-child(3),
    td.col-task,
    th:nth-child(5),
    td.col-reward,
    th:nth-child(8),
    td.col-followers {
        display: none;
    }

    /* Cho table co lại vừa màn hình */
    table {
        table-layout: fixed;
    }

    .table-wrapper {
        position: relative;
        overflow-x: auto;
    }

    /* Option: chỉnh lại font-size, padding nếu cần */
}

@media (max-width: 768px) {

    .airdropsvietnam_tree_post {
        position: fixed;
        left: 0;
        z-index: 999999;
        display: flex;
        width: 100%;
        height: 48px;
        bottom: 0;
        top: unset;
    }

    .airdropsvietnam_tree_post ul {
        display: flex;
        width: 100%;
        justify-content: space-evenly;
        margin-bottom: 0;
        border-radius: 0;
        border-top-left-radius: 5px;
        border-top-right-radius: 5px;
        align-items: center;
    }

    .list__air__title {
        flex-wrap: wrap;
    }

    .list__air__title p {
        width: 100%;
    }

    .network-list {
        width: 100%;
    }

    .header-top-left,
    .header-top-right,
    .main-nav .nav-left>a,
    .main-nav .nav-right {
        display: none;
    }

    .header-top {
        justify-content: center;
    }

    .nav-left {
        gap: 15px;
    }

    .post-header h1 {
        font-size: 2rem;
    }

    .post-category {
        display: none;
    }

    .post-pagination {
        flex-direction: column;
    }

    .post-pagination .next-post {
        border-left: none;
        border-top: 1px solid var(--border-color);
    }

    .posts-grid {
        grid-template-columns: 1fr;
    }

    .airdrop-claim-item {
        width: 100%;
    }

    .author-box {
        flex-direction: column;
        text-align: center;
    }

    .author-social {
        justify-content: center;
    }

    .footer-widgets {
        grid-template-columns: 1fr 1fr;
    }

    .crypto-nav li a {
        font-size: 15px;
    }
}

/* ===================================================================
   RESPONSIVE CHO MÀN HÌNH SIÊU NHỎ (DƯỚI 430px) - BỐ CỤC THẺ MỚI
   =================================================================== */
@media (max-width: 768px) {

    /* Ẩn hoàn toàn phần đầu bảng (thead) trên di động */
    .airdrop-table-container thead {
        display: none;
    }

    /* Bỏ định dạng của tbody để các thẻ tr hoạt động độc lập */
    .airdrop-table-container tbody {
        display: contents;
    }

    /* Biến mỗi hàng (tr) thành một thẻ riêng biệt, sử dụng Grid Layout */
    .airdrop-table-container tbody tr {
        display: grid;
        grid-template-columns: 1fr 1fr;
        /* Tạo layout 2 cột bằng nhau */
        grid-auto-flow: dense;
        /* Cho phép các mục tự điền vào chỗ trống */
        gap: 8px 16px;
        /* Khoảng cách giữa các dòng và cột */

        margin-bottom: 20px;
        padding: 15px;
        border-radius: 12px;
        border: 1px solid var(--border-gray);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
        background-color: var(--table-bg);
    }

    /* Reset lại tất cả các ô (td) */
    .airdrop-table-container td {
        display: block;
        padding: 0;
        border: none;
    }

    /* Bỏ hoàn toàn pseudo-element ::before đã tạo trước đó */
    .airdrop-table-container td::before {
        display: none;
    }

    /* ----- SẮP XẾP CÁC Ô VÀO LƯỚI ----- */

    /* 1. Tên dự án (Logo, Tên) - Trải dài toàn bộ chiều rộng thẻ */
    .airdrop-table-container .col-name {
        grid-column: 1 / -1;
        /* Bắt đầu từ cột 1, kết thúc ở cột cuối cùng */
        margin-bottom: 8px;
        padding-bottom: 12px;
        border-bottom: 1px solid var(--border-gray);
    }

    .col-name .cell-content {
        justify-content: flex-start;
        gap: 15px;
    }

    /* Thêm số thứ tự (nếu có) */
    .col-index {
        font-size: 16px;
        font-weight: bold;
        color: var(--text-secondary);
    }

    /* 2. Cột bên TRÁI */
    .airdrop-table-container .col-status,
    .airdrop-table-container .col-funds,
    .airdrop-table-container .col-followers {
        grid-column: 1;
        /* Nằm ở cột 1 */
        text-align: left;
    }

    /* 3. Cột bên PHẢI */
    .airdrop-table-container .col-task,
    .airdrop-table-container .col-reward,
    .airdrop-table-container .col-xscore {
        grid-column: 2;
        /* Nằm ở cột 2 */
        text-align: right;
        /* Căn phải nội dung */
    }

    /* ----- ĐIỀU CHỈNH STYLE CHO TỪNG PHẦN TỬ BÊN TRONG THẺ ----- */

    /* Cột trạng thái */
    .col-status .cell-content-stack {
        align-items: flex-start;
    }

    .status-label {
        padding: 4px 8px;
        font-size: 12px;
    }

    /* Cột quỹ và người theo dõi */
    .col-funds .cell-content,
    .col-followers .cell-content {
        justify-content: flex-start;
    }

    .icon-stack img {
        width: 24px;
        height: 24px;
    }

    /* Cột nhiệm vụ (Task) */
    .col-task .task-types,
    .col-task .task-meta {
        justify-content: flex-end;
        /* Căn phải nội dung bên trong */
        text-align: right;
    }

    .col-task .task-meta {
        gap: 8px;
        flex-direction: column;
        align-items: flex-end;
    }

    /* Cột Điểm X */
    .col-xscore .cell-content {
        flex-direction: row-reverse;
        /* Đảo ngược thanh điểm và số */
        justify-content: flex-end;
    }

    /* Cột phần thưởng */
    .col-reward {
        font-weight: bold;
        color: var(--text-primary);
    }

    .items-end img {
        width: 200px;
    }
}


@media(max-width:560px) {

    .entry-content .wp-block-image img,
    .entry-content .wp-block-image figcaption {
        max-width: 370px;
    }

    .site-main {
        width: 100%;
    }
}