/* Shared shells only. Campaigns keep their existing layout and spacing. */
@scope (.dose-responsive, .editor-styles-wrapper) to (.coa-wrapper, .coa-page, .ragnarok-wrapper, .ragnarok-page, .tor-area, .dose-editor-demo, .dose-editor-gca, .dose-editor-ww, .dose-editor-rer) {
    /* Keep link feedback legible on branded blue surfaces in both themes. */
    :is(header.dose-site-header .navbar, header.dose-site-header .dose-header__support, .dose-site-header .menu_expand, .trending, footer.revamp) a:not(.wp-block-button__link, .wp-block-navigation-item__content):is(:hover, :focus-visible, :active),
    a:is(.btn_full, .btn_short, .btn_support):not(.wp-block-button__link, .wp-block-navigation-item__content):is(:hover, :focus-visible, :active) {
        color: var(--wp--preset--color--dose-yellow, #fff59d) !important;
    }
    :is(header.dose-site-header .navbar, header.dose-site-header .dose-header__support, .dose-site-header .menu_expand, .trending, footer.revamp) a:not(.wp-block-button__link, .wp-block-navigation-item__content):focus-visible,
    a:is(.btn_full, .btn_short, .btn_support):not(.wp-block-button__link, .wp-block-navigation-item__content):focus-visible {
        outline: 2px solid var(--wp--preset--color--dose-yellow, #fff59d);
        outline-offset: 4px;
    }
    .trending .tag-cloud-link:is(:hover, :focus-visible, :active) {
        background-color: rgba(0, 0, 0, .12) !important;
    }
    .wrapper:not(.coa-wrapper, .ragnarok-wrapper) {
        --paddingX70: 48px;
        --dose-sidebar-width: 332px;
    }
    .container {
        --size: var(--wp--style--global--wide-size, 1320px);
        max-width: var(--wp--style--global--wide-size, 1320px);
        width: 100%;
        margin-inline: auto;
        box-sizing: border-box;
    }
    .container.alignfull { max-width: none; }
    .container:not(.alignwide, .alignfull).is-layout-constrained {
        max-width: var(--wp--style--global--content-size, 1200px);
    }
    .layout,
    :scope .single-revamp .blog_detail_head > .container > .layout {
        display: grid;
        grid-template-columns: minmax(0, 1fr) var(--dose-sidebar-width, 332px);
    }
    .layout > .col-layout { min-width: 0; }
    /* These legacy rows/grids own spacing; native flow margins would add it twice. */
    :is(.layout, .txthead).is-layout-flow > * { margin-block: 0; }
    :is(.ads_header, .dose-top-panel, .ads_side, .dose-side-panel) .grid.is-layout-flow > * { margin-block: 0; }
    :is(.ads_side, .dose-side-panel) .grid { padding: 16px; }
    /* Ad units reserve their own aspect ratios; shells need no extra placeholder. */
    .dose-top-panel, .dose-side-panel { min-height: 0; }
    .dose-top-panel { padding-top: 16px; margin-bottom: 16px; }
    .homepage > .trending { margin-top: 0; padding-block: 24px; }
    .control_popular { gap: 16px; }
    .content_grid { gap: 0; align-items: stretch; }
    .content_grid > .col-content > .news.revamp { padding-top: 0; }
    .content_grid > .col-content > .editorial.revamp {
        margin-top: 0;
        top: var(--dose-header-bottom, calc(64px + var(--wp-admin--admin-bar--height, 0px) + 8px));
    }
    main.content.content_detail { width: 100%; }
    .trending_in .trending_tag { min-width: 0; width: 100%; }
    .trending_tag .swiper .swiper-wrapper { flex-wrap: nowrap; align-items: center; overflow: visible; gap: 8px; }
    .trending_tag .swiper.swiper-initialized .swiper-wrapper { gap: 0; }
    .trending_tag .swiper .swiper-wrapper > * { margin-block: 0; }
    .trending_tag .swiper .swiper-slide { width: auto; flex-shrink: 0; }
    .group_popular .item .view-label {
        box-sizing: border-box;
        width: 48px;
        height: 56px;
        top: -8px;
        right: -8px;
        padding: 8px 8px 16px;
        background-image: url(../images/view-label.svg);
        color: #0049df;
        font-size: 10px;
        line-height: 1.2;
    }
    .group_popular .item .view-label span {
        display: block;
        font-size: 12px;
        font-weight: 700;
        line-height: 1.2;
    }
    .group_popular .item .view-label br { display: none; }
    .group_popular .item .txt .num { font-size: 40px; }
    .news.revamp .group_news > .item_list {
        position: relative;
        isolation: isolate;
        transition: transform 180ms ease-out;
    }
    .news.revamp .group_news > .item_list::before {
        content: "";
        position: absolute;
        inset: 16px;
        z-index: -1;
        pointer-events: none;
        background: none center / cover no-repeat;
        filter: blur(24px);
        opacity: 0;
        transition: opacity 240ms ease-out;
    }
    .news.revamp .group_news > .item_list:focus-within {
        transform: translateY(-4px);
    }
    .news.revamp .group_news > .item_list:is(:focus-within, :active)::before {
        background-image: var(--dose-news-image, none);
        opacity: .18;
        animation: dose-news-ambient 4s ease-in-out infinite alternate;
    }
    @media (hover: hover) {
        .news.revamp .group_news > .item_list:hover {
            transform: translateY(-4px);
        }
        .news.revamp .group_news > .item_list:hover::before {
            background-image: var(--dose-news-image, none);
            opacity: .18;
            animation: dose-news-ambient 4s ease-in-out infinite alternate;
        }
    }
    .news.revamp .group_news > .item_list:active {
        transform: translateY(-2px) scale(.99);
    }
    @media (prefers-reduced-motion: reduce) {
        .news.revamp .group_news > .item_list,
        .news.revamp .group_news > .item_list:is(:hover, :focus-within, :active) {
            transform: none;
            transition: none;
        }
        .news.revamp .group_news > .item_list::before,
        .news.revamp .group_news > .item_list:is(:hover, :focus-within, :active)::before {
            animation: none;
            transition: none;
        }
    }
    .backdrop, .backdrop_detail { overflow: clip; }
    .wrapper.is-layout-flow > .backdrop { margin-block: 0; }
    #wpadminbar img { min-height: 0; }
    .wp-block-post-content { min-width: 0; overflow-wrap: anywhere; }
    .wp-block-post-content :is(img, video) { max-width: 100%; height: auto; }
    .wp-block-post-content :is(iframe, embed, object) { max-width: 100%; }
    .wp-block-post-content :is(pre, .wp-block-table) { max-width: 100%; overflow-x: auto; }
    footer :is(.middle, .bottom, .menu_footer, .social) { flex-wrap: wrap; gap: 24px; }
    footer .col-footer { min-width: 0; }
    footer a { overflow-wrap: anywhere; }

    @media (width < 1200px) {
        .wrapper:not(.coa-wrapper, .ragnarok-wrapper) { --paddingX70: 40px; --dose-sidebar-width: 260px; }
    }
    @media (width <= 991px) {
        .wrapper:not(.coa-wrapper, .ragnarok-wrapper) { --paddingX70: 24px; --dose-sidebar-width: 186px; }
        .content_grid, .content_grid.revert { flex-direction: column; }
        .content_grid > .col-content { width: 100%; min-width: 0; }
        .content_grid > .col-content > .editorial.revamp { position: static; margin-top: 32px; }
    }
    @media (width <= 767px) {
        .wrapper:not(.coa-wrapper, .ragnarok-wrapper) { --paddingX70: 16px; }
        .layout,
        :scope .single-revamp .blog_detail_head > .container > .layout {
            grid-template-columns: minmax(0, 1fr);
        }
        .layout > .col-layout { padding-inline: var(--paddingX70); }
        .popular .popular_in,
        .content > section > .container > .layout > .col-layout { padding-inline: 0 !important; }
        .homepage .layout > .col-layout:has(> .dose-side-panel [data-dose-ad-slot]) { display: block; }
        .layout :is(.editorial.revamp, .topchart.revamp, .ads_side.showmb, .dose-side-panel.showmb) {
            width: calc(100% + 2 * var(--paddingX70));
            margin-inline: calc(-1 * var(--paddingX70));
        }
        .banner_side { position: static; width: 100%; }
        .banner_side > .showpc { display: none; }
        footer .middle { align-items: flex-start; }
    }
}
@keyframes dose-news-ambient {
    from { transform: translateX(-8px); }
    to { transform: translateX(8px); }
}

/* Native controls: immediate focus, reversible feedback, authored state colors win. */
:where(.wp-block-button__link, .wp-block-navigation-item__content) {
    transition: color 150ms ease, background-color 150ms ease, border-color 150ms ease, opacity 150ms ease;
}
:where(.wp-block-button__link, .wp-block-navigation-item__content):focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 2px;
}
@media (hover: hover) {
    :where(.wp-block-button__link, .wp-block-navigation-item__content):hover { opacity: .92; }
}
:where(.wp-block-button__link, .wp-block-navigation-item__content):active { opacity: .84; }
@media (prefers-reduced-motion: reduce) {
    :where(.wp-block-button__link, .wp-block-navigation-item__content) { transition: none; }
}

/* Optional Engine absence: Core Images retain campaign art direction. */
.coa-page .wp-block-image.bg-m { display: none; }
@media (max-width: 767px) {
    .coa-page .wp-block-image.bg-d { display: none; }
    .coa-page .wp-block-image.bg-m { display: block; }
}

/* Crystal archives: native block wrappers must not add a second surface or gap. */
.coa-page main.content > .wp-block-group,
.coa-page main.content .banner .wrapper > *,
.coa-page main.content .banner .wrapper .bottom > .wp-block-buttons,
.coa-page main.content .m-content .cate-intro .cate-wrap > * {
    margin-block: 0;
}
.coa-page main.content .banner .wrapper .bottom .wp-block-button.btn {
    padding: 0;
    margin: 0 0 24px;
    background: none;
}
.coa-page main.content .banner .wrapper .bottom .wp-block-button > .wp-block-button__link {
    border: 0;
    border-radius: 0;
    background: none;
    padding: 0;
}
.coa-page main.content .banner .wrapper .bottom .wp-block-button.btn > .wp-block-button__link {
    padding: 16px 32px;
    background-color: #3063f1;
    font-size: 18px;
}
.coa-page main.content .banner .wrapper .bottom .wp-block-button.btn > .wp-block-button__link::after {
    content: none;
}
.coa-page main.content .m-content {
    padding-block-start: 48px;
}
.coa-page main.content .m-content .cate-intro {
    margin-bottom: 48px;
}
.coa-page main.content .m-content .cate-intro .cate-wrap {
    flex-wrap: wrap;
    overflow: visible;
}
.coa-page main.content .m-content .cate-intro .cate-wrap > .wp-block-template-part {
    display: contents;
    padding: 0;
    border: 0;
    background: none;
}
.coa-page main.content .m-content .cate-intro .cate-wrap .title,
.coa-page main.content .m-content .cate-intro .cate-wrap .category-item {
    margin: 0;
    font-family: "anantason";
    font-size: 14px;
    font-weight: 600;
    color: white;
}
.coa-page main.content .m-content .cate-intro .cate-wrap .category-item {
    padding: 0;
    border: 0;
    background: none;
}
.coa-page main.content .m-content .cate-intro .cate-wrap .category-item a {
    display: inline-flex;
    align-items: center;
    min-height: 48px;
    padding: 8px 16px;
    box-sizing: border-box;
    background-color: #19191a;
    color: white;
    text-decoration: none;
    transition: background-color 150ms ease, opacity 150ms ease;
}
.coa-page main.content .m-content .cate-intro .cate-wrap .category-item.active a,
.coa-page main.content .m-content .cate-intro .cate-wrap .category-item a:is(:hover, :focus-visible) {
    background-color: #3063f1;
}
.coa-page main.content .m-content .cate-intro .cate-wrap .category-item a:focus-visible {
    outline: 2px solid white;
    outline-offset: 2px;
}
.coa-page main.content .m-content .cate-intro .cate-wrap .category-item a:active {
    opacity: .84;
}
@media (prefers-reduced-motion: reduce) {
    .coa-page main.content .m-content .cate-intro .cate-wrap .category-item a {
        transition: none;
    }
}
.backtotop a::before { transition: transform 160ms var(--wp--custom--theme-trans-timing, ease-out); }
.backtotop a:hover::before { top: 0; }
.backtotop a:focus-visible { outline: 2px solid currentColor; outline-offset: 8px; }
.backtotop a:focus-visible::before { transform: translateY(-4px); }
@media (hover: hover) and (pointer: fine) {
    .backtotop a:hover::before { transform: translateY(-4px); }
}
.backtotop a:active::before { transform: translateY(2px) scale(.85); }
.backtotop a.is-activating::before { animation: dose-top-launch 420ms var(--wp--custom--theme-trans-timing, ease-out); }
@keyframes dose-top-launch {
    0%, 100% { transform: translateY(0); opacity: 1; }
    25% { transform: translateY(3px) scale(.85); }
    60% { transform: translateY(-16px); opacity: 0; }
    61% { transform: translateY(8px); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
    .backtotop a::before { animation: none !important; transition: none; transform: none !important; }
}