/* Chủ đề trang chủ theo dịp — chỉ trang chủ desktop Hành chính (khung dc-*), lớp trên <html> do
   seasonal-theme.js bật theo ngày. Không đổi trang chức năng, iframe hay giao diện điện thoại. */

/* Phần trang trí do seasonal-theme.js gắn chỉ hiện trên trang chủ desktop khi chủ đề bật. */
.hc-theme-ornament,
.hc-theme-burst { display: none; }
.hc-theme-logo { display: contents; }

@keyframes hc-theme-rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes hc-theme-fade { from { opacity: 0; } to { opacity: 1; } }
/* Nơ + ngày lặp lại theo chu kỳ 14 giây: vẽ nét, giữ ~10 giây, mờ nét rồi vẽ lại. */
@keyframes hc-theme-loop-line { 0% { stroke-dashoffset: 1; } 7% { stroke-dashoffset: 0; } 90% { stroke-dashoffset: 0; } 97%, 100% { stroke-dashoffset: 1; } }
@keyframes hc-theme-loop-heart { 0%, 3% { stroke-dashoffset: 1; } 10% { stroke-dashoffset: 0; } 90% { stroke-dashoffset: 0; } 96%, 100% { stroke-dashoffset: 1; } }
@keyframes hc-theme-loop-tails { 0%, 10% { stroke-dashoffset: 1; } 13.5% { stroke-dashoffset: 0; } 89% { stroke-dashoffset: 0; } 93%, 100% { stroke-dashoffset: 1; } }
@keyframes hc-theme-loop-date { 0%, 12% { opacity: 0; transform: translateY(8px); } 18% { opacity: 1; transform: none; } 87% { opacity: 1; transform: none; } 93%, 100% { opacity: 0; transform: none; } }
@keyframes hc-theme-heartbeat { 0%, 100% { transform: scale(1); } 30% { transform: scale(1.14); } 55% { transform: scale(.97); } 75% { transform: scale(1.06); } }
@keyframes hc-theme-shine { from { background-position: 160% 0; } to { background-position: -60% 0; } }
@keyframes hc-theme-petal-burst {
    0% { transform: translate(0, 0) rotate(0deg) scale(.4); opacity: 0; }
    12% { opacity: 1; }
    65% { opacity: 1; }
    100% { transform: translate(var(--bx), var(--by)) rotate(var(--br)) scale(1); opacity: 0; }
}

@media screen and (min-width: 769px) {
    /* ===== Ngày Phụ nữ Việt Nam 20/10 (hc-theme-womens-day) ===== */
    /* Ảnh nền phủ kín vùng nội dung (dưới thanh trên, bên phải thanh icon). Lớp gradient bên dưới
       giữ màu tông hồng nếu ảnh chưa tải được. */
    html.hc-theme-womens-day:not(.embed-mode) body.hc-desktop-shell-ready #hubHome[data-hub-mode="home"]::before {
        content: '';
        position: fixed;
        top: var(--dc-topbar-height);
        left: 56px;
        right: 0;
        bottom: 0;
        z-index: 0;
        pointer-events: none;
        background:
            url("themes/womens-day-2026/background.jpg") center / cover no-repeat,
            radial-gradient(ellipse at 50% 38%, #fbf5f1 0%, #f3e6de 55%, #e9d6cb 100%);
    }
    html.hc-theme-womens-day:not(.embed-mode) body.hc-desktop-shell-ready #hubHome[data-hub-mode="home"] .hub-home-layout {
        position: relative;
        z-index: 1;
    }

    /* Logo: quầng sáng kem phía sau + một vệt sáng lướt qua nét logo khi mở trang. */
    html.hc-theme-womens-day:not(.embed-mode) body.hc-desktop-shell-ready #hubHome[data-hub-mode="home"] .hc-theme-logo {
        position: relative;
        display: block;
        width: 240px;
        max-width: 60%;
        margin: 0 0 18px;
        animation: hc-theme-rise .7s cubic-bezier(.2, .7, .2, 1) .05s both;
    }
    html.hc-theme-womens-day:not(.embed-mode) body.hc-desktop-shell-ready #hubHome[data-hub-mode="home"] .hc-theme-logo .dc-home-logo {
        width: 100%;
        max-width: none;
        margin: 0;
    }
    html.hc-theme-womens-day:not(.embed-mode) body.hc-desktop-shell-ready #hubHome[data-hub-mode="home"] .hc-theme-logo::before {
        content: '';
        position: absolute;
        inset: -42px -80px;
        z-index: -1;
        pointer-events: none;
        background: radial-gradient(closest-side, rgba(255, 251, 247, .92), rgba(255, 251, 247, .55) 48%, rgba(255, 251, 247, 0) 100%);
    }
    html.hc-theme-womens-day:not(.embed-mode) body.hc-desktop-shell-ready #hubHome[data-hub-mode="home"] .hc-theme-logo::after {
        content: '';
        position: absolute;
        inset: 0;
        pointer-events: none;
        background: linear-gradient(105deg, rgba(255, 255, 255, 0) 40%, rgba(255, 247, 228, .95) 50%, rgba(255, 255, 255, 0) 60%) no-repeat;
        background-size: 250% 100%;
        background-position: 160% 0;
        -webkit-mask: url("logo.png") center / 100% 100% no-repeat;
        mask: url("logo.png") center / 100% 100% no-repeat;
        animation: hc-theme-shine 1.6s ease-in-out .9s both;
    }

    html.hc-theme-womens-day:not(.embed-mode) body.hc-desktop-shell-ready #hubHome[data-hub-mode="home"] .hc-hero-greeting {
        animation: hc-theme-rise .7s cubic-bezier(.2, .7, .2, 1) .25s both;
    }
    html.hc-theme-womens-day:not(.embed-mode) body.hc-desktop-shell-ready #hubHome[data-hub-mode="home"] .hc-hero-greeting-title {
        color: #3a2f2a;
        font-weight: 400;
        font-size: clamp(18px, 1.35vw, 22px);
        text-shadow: 0 1px 14px rgba(255, 250, 246, .8);
    }
    html.hc-theme-womens-day:not(.embed-mode) body.hc-desktop-shell-ready #hubHome[data-hub-mode="home"] .dc-home-question {
        max-width: 860px;
        margin-top: 10px;
        color: #2c221e;
        /* hanh-chinh.css ép font sans cho mọi h2 trong thẻ bằng !important. */
        font-family: 'Playfair Display', 'Cormorant Garamond', Georgia, serif !important;
        font-weight: 500;
        font-size: clamp(32px, 2.75vw, 48px);
        line-height: 1.2;
        letter-spacing: -.3px;
        text-shadow: 0 1px 18px rgba(255, 250, 246, .85);
        animation: hc-theme-rise .8s cubic-bezier(.2, .7, .2, 1) .4s both;
    }

    /* Nơ trái tim + "20.10.2026 Is Coming!!!": nét nơ tự vẽ khi mở trang và lặp lại theo chu kỳ; là nút — bấm để rắc hoa. */
    html.hc-theme-womens-day:not(.embed-mode) body.hc-desktop-shell-ready #hubHome[data-hub-mode="home"] .hc-theme-ornament {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 2px;
        min-height: 0;
        margin: 12px auto 0;
        padding: 4px 12px 6px;
        border: 0;
        border-radius: 14px;
        background: transparent;
        box-shadow: none;
        color: #b5736b;
        cursor: pointer;
        animation: hc-theme-fade .4s ease-out .6s both;
    }
    html.hc-theme-womens-day:not(.embed-mode) body.hc-desktop-shell-ready #hubHome[data-hub-mode="home"] .hc-theme-ornament:focus-visible {
        outline: 2px solid #b5736b;
        outline-offset: 2px;
    }
    html.hc-theme-womens-day:not(.embed-mode) body.hc-desktop-shell-ready #hubHome[data-hub-mode="home"] .hc-theme-ornament svg {
        display: block;
        width: 240px;
        height: 44px;
        overflow: visible;
    }
    html.hc-theme-womens-day:not(.embed-mode) body.hc-desktop-shell-ready #hubHome[data-hub-mode="home"] .hc-theme-ornament path {
        stroke-dasharray: 1;
        stroke-dashoffset: 1;
        animation: hc-theme-loop-line 14s ease-in-out .75s infinite both;
    }
    html.hc-theme-womens-day:not(.embed-mode) body.hc-desktop-shell-ready #hubHome[data-hub-mode="home"] .hc-theme-ornament .hc-ribbon-heart { animation-name: hc-theme-loop-heart; }
    html.hc-theme-womens-day:not(.embed-mode) body.hc-desktop-shell-ready #hubHome[data-hub-mode="home"] .hc-theme-ornament .hc-ribbon-tails { animation-name: hc-theme-loop-tails; }
    html.hc-theme-womens-day:not(.embed-mode) body.hc-desktop-shell-ready #hubHome[data-hub-mode="home"] .hc-theme-ornament .hc-ribbon-bow {
        transform-box: fill-box;
        transform-origin: 50% 70%;
    }
    html.hc-theme-womens-day:not(.embed-mode) body.hc-desktop-shell-ready #hubHome[data-hub-mode="home"] .hc-theme-ornament:is(:hover, :focus-visible) .hc-ribbon-bow {
        animation: hc-theme-heartbeat .9s ease-in-out;
    }
    html.hc-theme-womens-day:not(.embed-mode) body.hc-desktop-shell-ready #hubHome[data-hub-mode="home"] .hc-theme-ornament-date {
        font-family: 'Cormorant Garamond', Georgia, serif !important;
        font-style: italic;
        font-weight: 400;
        font-size: 30px;
        line-height: 1.05;
        letter-spacing: .5px;
        /* Lời chúc ngày 20/10 xuống dòng trước ngày tháng để không lấn vào bó hoa. */
        white-space: pre-line;
        text-align: center;
        text-shadow: 0 1px 12px rgba(255, 250, 246, .9);
        animation: hc-theme-loop-date 14s ease-in-out .75s infinite both;
    }

    /* Chùm cánh hoa khi bấm nơ: nổi trên nội dung, không chặn chuột, tự xóa khi bay xong. */
    html.hc-theme-womens-day:not(.embed-mode) body.hc-desktop-shell-ready #hubHome[data-hub-mode="home"] .hc-theme-burst {
        display: block;
        position: fixed;
        inset: 0;
        z-index: 5;
        overflow: hidden;
        pointer-events: none;
    }
    html.hc-theme-womens-day:not(.embed-mode) body.hc-desktop-shell-ready #hubHome[data-hub-mode="home"] .hc-burst-petal {
        position: absolute;
        left: var(--ox);
        top: var(--oy);
        width: var(--size);
        height: calc(var(--size) * 1.25);
        margin: calc(var(--size) * -.6) 0 0 calc(var(--size) * -.5);
        background: radial-gradient(circle at 30% 25%, #fff6f3 0%, var(--c) 55%, var(--c2) 100%);
        border-radius: 80% 12% 80% 12%;
        box-shadow: 0 1px 2px rgba(150, 80, 70, .15);
        animation: hc-theme-petal-burst var(--bd) cubic-bezier(.15, .7, .3, 1) forwards;
    }

    /* Thanh lối tắt: kính mờ trong suốt, nút trắng, biểu tượng trên nền tròn hồng. */
    html.hc-theme-womens-day:not(.embed-mode) body.hc-desktop-shell-ready #hubHome[data-hub-mode="home"] .hc-home-action-grid {
        width: min(100%, 840px);
        padding: 12px;
        gap: 10px;
        border: 1px solid rgba(255, 255, 255, .7);
        border-radius: 18px;
        background: rgba(255, 255, 255, .42);
        -webkit-backdrop-filter: blur(10px) saturate(1.1);
        backdrop-filter: blur(10px) saturate(1.1);
        box-shadow: 0 12px 34px rgba(120, 72, 60, .1);
        animation: hc-theme-rise .7s cubic-bezier(.2, .7, .2, 1) .8s both;
    }
    html.hc-theme-womens-day:not(.embed-mode) body.hc-desktop-shell-ready #hubHome[data-hub-mode="home"] .hc-home-action-chip {
        min-height: 54px;
        padding: 10px 12px;
        white-space: nowrap;
        border: 1px solid rgba(232, 210, 203, .7);
        border-radius: 12px;
        background: rgba(255, 255, 255, .92);
        color: #2f2622;
        box-shadow: 0 2px 8px rgba(120, 72, 60, .05);
    }
    html.hc-theme-womens-day:not(.embed-mode) body.hc-desktop-shell-ready #hubHome[data-hub-mode="home"] .hc-home-action-chip:hover {
        background: #fff8f5;
        border-color: #e6bfb5;
        box-shadow: 0 6px 16px rgba(181, 115, 107, .14);
    }
    html.hc-theme-womens-day:not(.embed-mode) body.hc-desktop-shell-ready #hubHome[data-hub-mode="home"] .hc-home-action-chip:focus-visible { outline-color: #b5736b; }
    html.hc-theme-womens-day:not(.embed-mode) body.hc-desktop-shell-ready #hubHome[data-hub-mode="home"] .hc-home-action-icon {
        width: 30px;
        height: 30px;
        flex: 0 0 30px;
        border-radius: 50%;
        background: #f5e1db;
        transition: transform .2s ease;
    }
    html.hc-theme-womens-day:not(.embed-mode) body.hc-desktop-shell-ready #hubHome[data-hub-mode="home"] .hc-home-action-chip:hover .hc-home-action-icon { transform: scale(1.08); }
    html.hc-theme-womens-day:not(.embed-mode) body.hc-desktop-shell-ready #hubHome[data-hub-mode="home"] .hc-home-action-icon .material-icons {
        color: #9a5f55;
        font-size: 18px;
    }
}

/* Máy bật "giảm chuyển động": giữ giao diện chủ đề tĩnh, không chùm hoa, không hiệu ứng. */
@media screen and (min-width: 769px) and (prefers-reduced-motion: reduce) {
    html.hc-theme-womens-day:not(.embed-mode) body.hc-desktop-shell-ready #hubHome[data-hub-mode="home"] .hc-theme-burst { display: none; }
    html.hc-theme-womens-day:not(.embed-mode) body.hc-desktop-shell-ready #hubHome[data-hub-mode="home"] :is(.hc-theme-logo, .hc-hero-greeting, .dc-home-question, .hc-theme-ornament, .hc-theme-ornament-date, .hc-home-action-grid, .hc-theme-ornament .hc-ribbon-bow) { animation: none; opacity: 1; transform: none; }
    html.hc-theme-womens-day:not(.embed-mode) body.hc-desktop-shell-ready #hubHome[data-hub-mode="home"] .hc-theme-logo::after { display: none; }
    html.hc-theme-womens-day:not(.embed-mode) body.hc-desktop-shell-ready #hubHome[data-hub-mode="home"] .hc-theme-ornament path { animation: none; stroke-dashoffset: 0; }
}