/* =============================================
   PlayKid v1.2 — extra.css
   Fix: avatar vuông, hover overlay, mosaic grid
   ============================================= */

/* ── GAME MOSAIC GRID ── */
.pk-gamelist-wrap {
    max-width: 1400px;
    margin: 0 auto;
    padding: 16px;
}

.pk-game-mosaic {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 6px;
    margin-bottom: 20px;
}

/* ── CARD BASE: VUÔNG hoàn toàn ── */
.pk-mosaic-card {
    display: block;
    position: relative;
    border-radius: 10px;
    overflow: hidden;
    cursor: pointer;
    text-decoration: none;
    /* aspect-ratio vuông */
    aspect-ratio: 1 / 1;
    background: #1a0a3e;
    transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.pk-mosaic-card:hover {
    transform: scale(1.04);
    z-index: 5;
    box-shadow: 0 8px 28px rgba(109,40,217,0.35);
}

/* HOT card: 2 cột × 2 hàng */
.pk-mosaic-card.is-hot {
    grid-column: span 2;
    grid-row: span 2;
    border-radius: 14px;
}

/* ── THUMBNAIL: fill vuông tuyệt đối ── */
.pk-mosaic-thumb {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;  /* crop ảnh để fill vuông */
    object-position: center;
    display: block;
}

/* Placeholder khi không có ảnh */
.pk-no-thumb {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, #7c3aed 0%, #3b82f6 100%);
    display: flex;
    align-items: center;
    justify-content: center;
}

.pk-no-thumb::after {
    content: '🎮';
    font-size: 36px;
}

.pk-mosaic-card.is-hot .pk-no-thumb::after {
    font-size: 56px;
}

/* ── OVERLAY: ẩn mặc định, hiện khi hover/touch ── */
.pk-mosaic-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 28px 10px 9px;
    background: linear-gradient(to top, rgba(0,0,0,0.82) 0%, transparent 100%);
    display: flex;
    flex-direction: column;
    gap: 2px;
    /* Ẩn mặc định */
    opacity: 0;
    transform: translateY(6px);
    transition: opacity 0.22s ease, transform 0.22s ease;
}

/* Hiện overlay khi hover */
.pk-mosaic-card:hover .pk-mosaic-overlay {
    opacity: 1;
    transform: translateY(0);
}

/* Touch devices: luôn hiện nhẹ */
@media (hover: none) {
    .pk-mosaic-overlay {
        opacity: 1;
        transform: translateY(0);
        padding: 18px 8px 6px;
        background: linear-gradient(to top, rgba(0,0,0,0.7) 0%, transparent 100%);
    }
}

.pk-mosaic-name {
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    line-height: 1.3;
    text-shadow: 0 1px 4px rgba(0,0,0,0.5);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
}

.pk-mosaic-card.is-hot .pk-mosaic-name {
    font-size: 14px;
}

.pk-mosaic-cat {
    color: rgba(255,255,255,0.65);
    font-size: 9px;
    font-weight: 500;
}

/* ── BADGES ── */
.pk-badge {
    position: absolute;
    top: 6px;
    left: 6px;
    font-size: 10px;
    font-weight: 700;
    padding: 2px 7px;
    border-radius: 4px;
    z-index: 3;
    color: #fff;
    line-height: 1.4;
    letter-spacing: 0.3px;
}

.pk-badge-hot { background: #ef4444; }
.pk-badge-new { background: #10b981; }
.pk-badge-top { background: #f59e0b; }

/* ── ADS TILE trong grid ── */
.pk-mosaic-ads {
    grid-column: span 2;
    border-radius: 10px;
    background: #f0f0f8;
    border: 1px dashed #ccc;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    aspect-ratio: 2 / 1; /* 2 cột rộng, cao 1 hàng */
}

/* ── CATEGORY FILTER FOOTER ── */
.pk-cat-footer {
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px solid #e5e5ee;
}

.pk-cat-footer-label {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1px;
    color: #999;
    text-transform: uppercase;
    margin-bottom: 10px;
}

.pk-cat-footer-strip {
    display: flex;
    gap: 7px;
    flex-wrap: wrap;
}

.pk-cat-btn {
    padding: 7px 16px;
    border-radius: 24px;
    font-size: 12px;
    font-weight: 600;
    border: 1px solid #ddd;
    cursor: pointer;
    background: #fff;
    color: #555;
    transition: all 0.18s;
    text-decoration: none;
    display: inline-block;
}

.pk-cat-btn:hover,
.pk-cat-btn.active {
    background: #6d28d9;
    color: #fff;
    border-color: #6d28d9;
}

/* =============================================
   RESPONSIVE GAME MOSAIC
   ============================================= */

/* Tablet: 4 cols */
@media (max-width: 1024px) {
    .pk-game-mosaic {
        grid-template-columns: repeat(4, 1fr);
        gap: 5px;
    }

    .pk-mosaic-ads {
        grid-column: span 2;
        aspect-ratio: 2 / 1;
    }
}

/* Mobile: 3 cols */
@media (max-width: 767px) {
    .pk-gamelist-wrap { padding: 8px; }

    .pk-game-mosaic {
        grid-template-columns: repeat(3, 1fr);
        gap: 4px;
    }

    .pk-mosaic-card { border-radius: 8px; }
    .pk-mosaic-card.is-hot { border-radius: 10px; }

    /* Mobile ads: full 3 cols width */
    .pk-mosaic-ads {
        grid-column: span 3;
        aspect-ratio: 3 / 1;
        height: 54px;
    }

    .pk-mosaic-name { font-size: 10px; }
    .pk-mosaic-card.is-hot .pk-mosaic-name { font-size: 12px; }
}

/* Small mobile */
@media (max-width: 400px) {
    .pk-game-mosaic {
        grid-template-columns: repeat(3, 1fr);
        gap: 3px;
    }
}

/* =============================================
   MOBILE NAV DRAWER
   ============================================= */
.pk-mobile-nav {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(10,8,32,0.97);
    z-index: 999;
    padding: 70px 24px 24px;
    flex-direction: column;
    animation: pkFadeIn 0.2s ease;
}

@keyframes pkFadeIn {
    from { opacity: 0; } to { opacity: 1; }
}

.pk-mobile-nav.open { display: flex; }

.pk-mobile-nav ul { list-style: none; padding: 0; margin: 0; }

.pk-mobile-nav li {
    border-bottom: 1px solid rgba(255,255,255,0.08);
}

.pk-mobile-nav a {
    display: block;
    padding: 16px 0;
    color: rgba(255,255,255,0.85);
    font-size: 18px;
    font-weight: 600;
    text-decoration: none;
}

/* =============================================
   THUMBNAIL PLACEHOLDER (game detail, sidebar)
   ============================================= */
.pk-thumb-placeholder {
    background: linear-gradient(135deg, #7c3aed, #3b82f6);
    display: flex;
    align-items: center;
    justify-content: center;
}

.pk-thumb-placeholder::after {
    content: '🎮';
    font-size: 28px;
}

/* =============================================
   GAME DETAIL — Fix avatar & hero
   ============================================= */
.pk-game-avatar {
    width: 100px;
    height: 100px;
    border-radius: 16px;
    object-fit: cover;
    object-position: center;
    flex-shrink: 0;
    display: block;
}

/* =============================================
   PLAY PAGE — related strip tablet/mobile
   ============================================= */
.pk-play-related-strip {
    display: none;
    padding: 10px 14px;
    background: #f8f8fc;
    border-top: 1px solid #eee;
    gap: 8px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

@media (max-width: 1024px) {
    .pk-play-related-strip { display: flex; }
}

/* =============================================
   APP DOWNLOAD — Mobile fixes
   ============================================= */
@media (max-width: 767px) {
    .pk-appdownload-page {
        grid-template-columns: 1fr !important;
    }

    .pk-appdownload-page .pk-sidebar-right {
        display: none !important;
    }

    .pk-app-hero {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .pk-store-btns {
        flex-direction: column;
        align-items: stretch;
    }

    .pk-store-btn {
        justify-content: center;
    }

    .pk-ads-banner-mid {
        display: none !important;
    }

    .pk-ads-banner-mid.pk-ads-mobile-only {
        display: flex !important;
        aspect-ratio: 1 / 1;
        height: auto;
    }
}

/* =============================================
   FOOTER
   ============================================= */
.pk-footer {
    background: linear-gradient(90deg, #1a0a3e, #0d1b4e);
    padding: 24px 16px;
    margin-top: 40px;
    text-align: center;
}

.pk-footer-logo {
    color: #fff;
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 8px;
    letter-spacing: 1px;
}

.pk-footer-copy {
    color: rgba(255,255,255,0.4);
    font-size: 12px;
    margin: 0;
}

/* =============================================
   ADMIN: meta box styling
   ============================================= */
#playkid_game_settings {
    border: 2px solid #6d28d9 !important;
}

#playkid_game_settings .postbox-header {
    background: linear-gradient(90deg, #1a0a3e, #0d1b4e);
}

#playkid_game_settings .postbox-header h2 {
    color: #fff !important;
}

#playkid_game_settings .postbox-header .handle-actions .toggle-indicator::before {
    color: rgba(255,255,255,0.6);
}

/* =============================================
   v1.3 NEW: CTA Buttons — đỏ cam, icon đúng
   ============================================= */
.pk-btn-goto {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    width: 100%;
    padding: 14px 20px;
    margin-bottom: 16px;
    border-radius: 12px;
    font-size: 16px;
    font-weight: 700;
    border: none;
    cursor: pointer;
    text-decoration: none;
    transition: opacity 0.2s, transform 0.18s;
    letter-spacing: 0.3px;
    color: #fff;
}

.pk-btn-goto:hover {
    opacity: 0.92;
    transform: translateY(-2px);
    color: #fff;
}

/* Play: đỏ cam */
.pk-btn-play {
    background: linear-gradient(90deg, #f97316, #ef4444);
    box-shadow: 0 4px 16px rgba(239,68,68,0.35);
}

/* Download: đậm hơn */
.pk-btn-download {
    background: linear-gradient(90deg, #dc2626, #b91c1c);
    box-shadow: 0 4px 16px rgba(220,38,38,0.3);
}

/* Reward wrap cho CTA */
.pk-reward-wrap { margin-bottom: 16px; }

.pk-reward-ads {
    border: 1px dashed #ddd;
    border-radius: 12px;
    padding: 16px;
    background: #f9f9fc;
    text-align: center;
}

/* =============================================
   v1.3 NEW: Trademark notice
   ============================================= */
.pk-trademark {
    font-size: 10px;
    color: #bbb;
    margin-top: 6px;
    line-height: 1.4;
    font-style: italic;
}

/* =============================================
   v1.3 NEW: Related games — only avatar grid
   ============================================= */
.pk-related-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 6px;
}

.pk-related-card {
    display: block;
    border-radius: 9px;
    overflow: hidden;
    aspect-ratio: 1 / 1;
    position: relative;
    transition: transform 0.18s;
    text-decoration: none;
}

.pk-related-card:hover { transform: scale(1.06); z-index: 2; }

.pk-related-thumb {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    position: absolute;
    inset: 0;
}

@media (max-width: 767px) {
    .pk-related-grid {
        grid-template-columns: repeat(4, 1fr);
        gap: 5px;
    }
}

/* =============================================
   v1.3 NEW: How to Play block
   ============================================= */
.pk-how-to-play {
    background: #f8f8fc;
    border: 1px solid #e8e8f0;
    border-radius: 12px;
    padding: 16px 20px;
    margin-top: 16px;
}

.pk-htp-title {
    font-size: 15px;
    font-weight: 700;
    color: #333;
    margin: 0 0 10px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.pk-htp-content {
    font-size: 13px;
    color: #555;
    line-height: 1.7;
}

.pk-htp-content p { margin-bottom: 8px; }
.pk-htp-content ul { padding-left: 20px; margin-bottom: 8px; }
.pk-htp-content li { margin-bottom: 4px; }

/* =============================================
   v1.3 NEW: Ads below iframe
   ============================================= */
.pk-ads-below-frame {
    width: 100%;
    min-height: 50px;
    padding: 12px 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f8f8fc;
    border-top: 1px solid #eee;
}

/* =============================================
   v1.3 NEW: Store section + reward
   ============================================= */
.pk-store-section {
    margin: 16px 0;
    padding: 16px;
    background: #f8f8fc;
    border-radius: 12px;
    border: 1px solid #eee;
}

.pk-store-intro {
    font-size: 12px;
    color: #888;
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 4px;
}

.pk-store-reward-ads {
    padding: 16px;
    background: #fff;
    border: 1px dashed #ddd;
    border-radius: 10px;
    text-align: center;
}

.pk-store-unlocked {
    animation: pkFadeIn 0.3s ease;
}

/* =============================================
   v1.3: Mobile ads wrap fix
   ============================================= */
.pk-ads-mobile-wrap {
    display: none;
    width: 100%;
    margin-bottom: 12px;
}

@media (max-width: 767px) {
    .pk-ads-mobile-wrap { display: block; }
    .pk-ads-hero { display: none !important; }
}

/* =============================================
   v1.4: Sidebar thumbs — VUÔNG tuyệt đối
   ============================================= */
.pk-hot-thumb,
.pk-sr-thumb {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 1 / 1 !important;
    object-fit: cover;
    object-position: center;
    border-radius: 10px;
    display: block;
}

/* Hot item container */
.pk-hot-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    margin-bottom: 10px;
    cursor: pointer;
    text-decoration: none;
    width: 100%;
}

/* Sr item container */
.pk-sr-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    cursor: pointer;
    text-decoration: none;
    width: 100%;
}

/* =============================================
   v1.4: Fix mosaic grid — NO gap khi HOT 2x2
   HOT card giữ đúng vị trí, không khoảng trống
   ============================================= */
.pk-game-mosaic {
    grid-auto-flow: dense; /* tự fill khoảng trống */
    align-items: start;
}

/* =============================================
   v1.4: /games/ archive link fix
   ============================================= */
.pk-cat-btn[href*="/games/"].active,
.pk-cat-btn[href$="/games/"].active { background: #6d28d9; color: #fff; }

/* =============================================
   v1.5: HOMEPAGE — Gaming Magazine Style
   ============================================= */
.pk-home {
    background: #0a0820;
    min-height: 100vh;
    color: #fff;
}

/* ── Hero Section ── */
.pk-hero-section {
    padding: 16px 16px 0;
    max-width: 1400px;
    margin: 0 auto;
}

.pk-hero-inner {
    display: grid;
    grid-template-columns: 1fr 280px;
    grid-template-rows: auto;
    gap: 8px;
    height: 480px;
}

/* Main big hero card */
.pk-hero-main {
    position: relative;
    border-radius: 16px;
    overflow: hidden;
    display: block;
    text-decoration: none;
    grid-row: 1;
    grid-column: 1;
}

.pk-hero-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}

.pk-hero-main:hover .pk-hero-bg { transform: scale(1.04); }

.pk-hero-main-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(5,3,20,0.95) 0%, rgba(5,3,20,0.3) 55%, transparent 100%);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 28px;
    gap: 8px;
}

.pk-hero-cat {
    display: inline-block;
    background: #6d28d9;
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: 20px;
    letter-spacing: 1px;
    text-transform: uppercase;
    width: fit-content;
}

.pk-hero-title {
    font-size: 26px;
    font-weight: 800;
    color: #fff;
    margin: 0;
    line-height: 1.2;
    text-shadow: 0 2px 8px rgba(0,0,0,0.5);
}

.pk-hero-excerpt {
    font-size: 13px;
    color: rgba(255,255,255,0.7);
    margin: 0;
    line-height: 1.5;
}

.pk-hero-play-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: linear-gradient(90deg,#f97316,#ef4444);
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    padding: 8px 16px;
    border-radius: 8px;
    width: fit-content;
    letter-spacing: 0.3px;
}

/* Sub hero cards (right column, 2x2 grid) */
.pk-hero-subs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    gap: 8px;
    grid-column: 2;
    grid-row: 1;
}

.pk-hero-sub {
    position: relative;
    border-radius: 12px;
    overflow: hidden;
    display: block;
    text-decoration: none;
}

.pk-hero-sub-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s;
}

.pk-hero-sub:hover .pk-hero-sub-bg { transform: scale(1.06); }

.pk-hero-sub-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0,0,0,0.8) 0%, transparent 60%);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 10px;
    gap: 2px;
}

.pk-hero-sub-title {
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    line-height: 1.3;
    text-shadow: 0 1px 4px rgba(0,0,0,0.6);
}

.pk-hero-sub-cat {
    color: rgba(255,255,255,0.6);
    font-size: 9px;
}

/* ── Category Quick Nav ── */
.pk-home-cats {
    padding: 14px 16px;
    max-width: 1400px;
    margin: 0 auto;
}

.pk-home-cats-inner {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 4px;
}

.pk-home-cats-inner::-webkit-scrollbar { display: none; }

.pk-home-cat-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 10px 14px;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 12px;
    text-decoration: none;
    color: rgba(255,255,255,0.75);
    font-size: 11px;
    font-weight: 600;
    flex-shrink: 0;
    transition: all 0.18s;
    min-width: 72px;
    text-align: center;
}

.pk-home-cat-item:hover,
.pk-home-cat-all {
    background: rgba(109,40,217,0.3);
    border-color: #6d28d9;
    color: #fff;
}

.pk-home-cat-icon { font-size: 18px; }

/* ── Section shared ── */
.pk-home-section {
    padding: 20px 16px;
    max-width: 1400px;
    margin: 0 auto;
}

.pk-home-section-hdr {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 14px;
}

.pk-home-section-title {
    font-size: 18px;
    font-weight: 800;
    color: #fff;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 10px;
}

.pk-title-bar {
    display: inline-block;
    width: 4px;
    height: 20px;
    background: linear-gradient(180deg,#f97316,#6d28d9);
    border-radius: 2px;
}

.pk-see-all {
    font-size: 12px;
    color: rgba(255,255,255,0.5);
    text-decoration: none;
    font-weight: 600;
    transition: color 0.18s;
}

.pk-see-all:hover { color: #f97316; }

/* ── Latest Games Grid ── */
.pk-latest-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 8px;
}

.pk-latest-card {
    display: flex;
    flex-direction: column;
    gap: 6px;
    text-decoration: none;
    cursor: pointer;
}

.pk-latest-thumb-wrap {
    position: relative;
    aspect-ratio: 1 / 1;
    border-radius: 12px;
    overflow: hidden;
    background: #1a0a3e;
}

.pk-latest-thumb {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.2s;
}

.pk-latest-card:hover .pk-latest-thumb { transform: scale(1.06); }

.pk-latest-hover {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.45);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.2s;
}

.pk-latest-card:hover .pk-latest-hover { opacity: 1; }

.pk-latest-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 0 2px;
}

.pk-latest-name {
    color: rgba(255,255,255,0.9);
    font-size: 11px;
    font-weight: 600;
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pk-latest-cat {
    color: rgba(255,255,255,0.4);
    font-size: 10px;
}

/* ── Blog Section ── */
.pk-home-blog-section {
    border-top: 1px solid rgba(255,255,255,0.06);
    margin-top: 8px;
}

.pk-blog-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
}

.pk-blog-card {
    display: flex;
    flex-direction: column;
    gap: 10px;
    text-decoration: none;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.07);
    border-radius: 12px;
    overflow: hidden;
    transition: transform 0.18s, border-color 0.18s;
}

.pk-blog-card:hover {
    transform: translateY(-3px);
    border-color: rgba(109,40,217,0.4);
}

.pk-blog-thumb-wrap {
    position: relative;
    aspect-ratio: 16 / 9;
    overflow: hidden;
}

.pk-blog-thumb {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.3s;
}

.pk-blog-card:hover .pk-blog-thumb { transform: scale(1.04); }

.pk-blog-no-thumb {
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg,#1a0a3e,#0d1b4e);
}

.pk-blog-cat-badge {
    position: absolute;
    top: 8px;
    left: 8px;
    background: #6d28d9;
    color: #fff;
    font-size: 9px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 20px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.pk-blog-info {
    padding: 0 12px 14px;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.pk-blog-title {
    font-size: 14px;
    font-weight: 700;
    color: #fff;
    margin: 0;
    line-height: 1.35;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.pk-blog-meta {
    font-size: 11px;
    color: rgba(255,255,255,0.35);
}

.pk-blog-excerpt {
    font-size: 12px;
    color: rgba(255,255,255,0.55);
    line-height: 1.5;
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ── Homepage Responsive ── */
@media (max-width: 1024px) {
    .pk-hero-inner { grid-template-columns: 1fr 220px; height: 380px; }
    .pk-latest-grid { grid-template-columns: repeat(4, 1fr); }
    .pk-blog-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 767px) {
    .pk-hero-inner {
        grid-template-columns: 1fr;
        grid-template-rows: 240px auto;
        height: auto;
    }
    .pk-hero-subs {
        grid-column: 1;
        grid-row: 2;
        grid-template-columns: repeat(4, 1fr);
        grid-template-rows: 80px;
        height: 80px;
    }
    .pk-hero-title { font-size: 20px; }
    .pk-latest-grid { grid-template-columns: repeat(3, 1fr); gap: 6px; }
    .pk-blog-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
    .pk-home-section { padding: 14px 12px; }
}

@media (max-width: 480px) {
    .pk-hero-inner { grid-template-rows: 200px auto; }
    .pk-hero-subs { grid-template-columns: repeat(4, 1fr); }
    .pk-latest-grid { grid-template-columns: repeat(3, 1fr); gap: 4px; }
    .pk-blog-grid { grid-template-columns: 1fr; }
}

/* =============================================
   v1.5: Play page mobile fullscreen CSS
   ============================================= */
@media (max-width: 767px) {
    .pk-play-page {
        grid-template-columns: 1fr !important;
        padding: 0 !important;
    }

    .pk-player-wrap { border-radius: 0; }

    .pk-iframe-container {
        /* Mobile: tỉ lệ cao hơn để fill màn dọc */
        padding-top: 75%;
    }

    /* Khi fullscreen: fill hoàn toàn */
    .pk-iframe-container:-webkit-full-screen { padding-top: 0; height: 100%; }
    .pk-iframe-container:fullscreen { padding-top: 0; height: 100%; }

    .pk-rotate-btn { display: inline-block !important; }
}

/* Fullscreen state */
:-webkit-full-screen .pk-iframe-container { padding-top: 0 !important; height: 100vh !important; }
:fullscreen .pk-iframe-container { padding-top: 0 !important; height: 100vh !important; }

/* =============================================
   v1.5: ads empty state — không hiện gì
   ============================================= */
.pk-ads-empty {
    display: none; /* Ẩn hoàn toàn khi không có code */
}

/* =============================================
   v1.6: BRIGHT HOMEPAGE — Kids-friendly
   Light background, vivid colors
   ============================================= */
.pk-home.pk-home-bright {
    background: #f0f4ff;
    min-height: 100vh;
    color: #1a1a2e;
}

/* Blog section on top — light card */
.pk-blog-top-section {
    background: #fff;
    padding: 20px 16px 24px;
    box-shadow: 0 2px 12px rgba(0,0,0,0.06);
}

.pk-blog-card-bright {
    background: #fff;
    border: 1.5px solid #e8eaf6;
    box-shadow: 0 2px 10px rgba(109,40,217,0.06);
    transition: transform 0.18s, box-shadow 0.18s;
}

.pk-blog-card-bright:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(109,40,217,0.14);
    border-color: #6d28d9;
}

.pk-blog-title-dark { color: #1a1a2e !important; }
.pk-blog-meta-dark  { color: #888 !important; }
.pk-blog-excerpt-dark { color: #555 !important; }

/* Hero section bright */
.pk-hero-bright {
    background: linear-gradient(135deg,#f0f4ff 0%,#fce4ff 100%);
    padding: 20px 16px;
}

.pk-title-dark { color: #1a1a2e !important; }
.pk-see-all-dark { color: #6d28d9 !important; }
.pk-see-all-dark:hover { color: #f97316 !important; }

/* Title bar colors */
.pk-bar-orange { background: linear-gradient(180deg,#f97316,#ef4444) !important; }
.pk-bar-purple { background: linear-gradient(180deg,#6d28d9,#a855f7) !important; }
.pk-bar-green  { background: linear-gradient(180deg,#10b981,#059669) !important; }

/* Hero bright grid */
.pk-hero-bright-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.pk-hero-bright-main {
    display: block;
    border-radius: 16px;
    overflow: hidden;
    aspect-ratio: 1 / 1;
    position: relative;
    text-decoration: none;
    box-shadow: 0 6px 24px rgba(109,40,217,0.18);
    transition: transform 0.2s;
}

.pk-hero-bright-main:hover { transform: scale(1.02); }

.pk-hero-bright-sub {
    display: block;
    border-radius: 12px;
    overflow: hidden;
    aspect-ratio: 1 / 1;
    position: relative;
    text-decoration: none;
    box-shadow: 0 3px 12px rgba(0,0,0,0.1);
    transition: transform 0.2s;
}

.pk-hero-bright-sub:hover { transform: scale(1.03); }

.pk-hero-bright-subs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    gap: 10px;
}

.pk-hero-bright-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    position: absolute;
    inset: 0;
}

/* Name tag at bottom — clean, no dark overlay */
.pk-hero-bright-name {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(255,255,255,0.92);
    padding: 7px 10px;
    display: flex;
    flex-direction: column;
    gap: 1px;
    backdrop-filter: blur(4px);
}

.pk-hero-bright-name span:first-child {
    font-size: 12px;
    font-weight: 700;
    color: #1a1a2e;
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pk-hero-bright-main .pk-hero-bright-name span:first-child {
    font-size: 15px;
}

/* Category nav bright */
.pk-home-cats-bright {
    background: #fff;
    padding: 12px 16px;
    border-top: 1px solid #e8eaf6;
    border-bottom: 1px solid #e8eaf6;
}

.pk-cat-bright {
    background: #f0f4ff !important;
    border: 1.5px solid #c7d2fe !important;
    color: #4338ca !important;
    border-radius: 12px !important;
    transition: all 0.18s !important;
}

.pk-cat-bright:hover,
.pk-home-cat-all.pk-cat-bright {
    background: linear-gradient(135deg,#6d28d9,#a855f7) !important;
    border-color: #6d28d9 !important;
    color: #fff !important;
    box-shadow: 0 4px 12px rgba(109,40,217,0.3) !important;
}

/* Games section bright */
.pk-games-section-bright {
    background: #f0f4ff;
    padding: 20px 16px;
}

.pk-latest-card-bright .pk-latest-thumb-wrap {
    box-shadow: 0 4px 14px rgba(0,0,0,0.1);
    border: 2px solid rgba(255,255,255,0.8);
}

.pk-latest-card-bright:hover .pk-latest-thumb-wrap {
    box-shadow: 0 8px 24px rgba(109,40,217,0.2);
    border-color: #a855f7;
}

.pk-latest-name-dark { color: #1a1a2e !important; font-weight: 700 !important; }
.pk-latest-cat-dark  { color: #6d28d9 !important; font-size: 10px !important; font-weight: 600 !important; }

/* Footer bright */
.pk-home-bright ~ footer,
.pk-home-bright + * .pk-footer {
    background: #1a1a2e;
}

/* ── Responsive ── */
@media (max-width: 767px) {
    .pk-hero-bright-grid {
        grid-template-columns: 1fr;
    }
    .pk-hero-bright-subs {
        grid-template-columns: repeat(4,1fr);
        grid-template-rows: 1fr;
    }
    .pk-hero-bright-sub { aspect-ratio: 1/1; }
    .pk-blog-grid.pk-blog-grid-top { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 480px) {
    .pk-blog-grid.pk-blog-grid-top { grid-template-columns: 1fr; }
    .pk-hero-bright-subs { grid-template-columns: repeat(2,1fr); grid-template-rows: 1fr 1fr; }
}