.opening-announcement[hidden] {
    display: none !important;
}

body.opening-announcement-active {
    overflow: hidden;
}

.opening-announcement {
    position: fixed !important;
    inset: 0;
    z-index: 10000 !important;
    display: grid;
    box-sizing: border-box;
    place-items: center;
    padding: 22px;
    opacity: 0;
    transition: opacity .25s ease;
}

.opening-announcement.is-visible {
    opacity: 1;
}

.opening-announcement__backdrop {
    position: absolute !important;
    inset: 0;
    background: rgba(38, 20, 12, .76);
    backdrop-filter: blur(7px);
}

.opening-announcement__dialog {
    position: relative !important;
    z-index: 1 !important;
    display: grid;
    grid-template-columns: 210px minmax(0, 1fr);
    width: min(760px, 100%);
    max-height: calc(100vh - 44px);
    overflow: auto;
    color: #42291d;
    border: 1px solid rgba(255, 220, 154, .75);
    border-radius: 22px;
    background: #fffaf1;
    box-shadow: 0 28px 75px rgba(25, 10, 3, .45);
    transform: translateY(18px) scale(.98);
    transition: transform .28s ease;
}

.opening-announcement.is-visible .opening-announcement__dialog {
    transform: translateY(0) scale(1);
}

.opening-announcement__close {
    position: absolute !important;
    top: 14px;
    right: 14px;
    z-index: 3 !important;
    display: grid;
    width: 36px;
    height: 36px;
    padding: 0;
    place-items: center;
    color: #78452e;
    border: 1px solid #ebcfb5;
    border-radius: 50%;
    background: rgba(255, 255, 255, .9);
    cursor: pointer;
    transition: color .2s ease, transform .2s ease, background .2s ease;
}

.opening-announcement__close:hover {
    color: #fff;
    background: #bd4e1b;
    transform: rotate(8deg);
}

.opening-announcement__visual {
    position: relative !important;
    display: grid;
    min-height: 100%;
    place-items: center;
    overflow: hidden;
    background: radial-gradient(circle at 50% 43%, #ffd56b 0, #f49a18 24%, #d85416 56%, #8e2d16 100%);
}

.opening-announcement__visual::before,
.opening-announcement__visual::after {
    content: "";
    position: absolute;
    border: 1px solid rgba(255, 243, 193, .25);
    border-radius: 50%;
}

.opening-announcement__visual::before {
    width: 285px;
    height: 285px;
}

.opening-announcement__visual::after {
    width: 180px;
    height: 180px;
}

.opening-announcement__dragon-ball {
    position: relative !important;
    z-index: 2 !important;
    display: grid;
    width: 118px;
    height: 118px;
    place-items: center;
    color: #b62f14;
    font-size: 58px;
    font-weight: 900;
    border: 5px solid rgba(255, 241, 172, .82);
    border-radius: 50%;
    background: radial-gradient(circle at 35% 28%, #fff3a5, #ffc234 45%, #eb7619 100%);
    box-shadow: inset -12px -14px 26px rgba(136, 43, 8, .22), 0 18px 34px rgba(91, 26, 7, .33);
}

.opening-announcement__dragon-ball::after {
    content: "★★★★";
    position: absolute;
    bottom: 19px;
    color: #c43116;
    font-size: 11px;
    letter-spacing: 1px;
}

.opening-announcement__spark {
    position: absolute;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #fff3a4;
    box-shadow: 0 0 16px #fff5ad;
}

.spark-one { top: 19%; left: 21%; }
.spark-two { right: 18%; bottom: 22%; width: 5px; height: 5px; }
.spark-three { right: 24%; top: 30%; width: 11px; height: 11px; }

.opening-announcement__content {
    box-sizing: border-box;
    padding: 37px 42px 34px;
}

.opening-announcement__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-bottom: 9px;
    color: #d45e19;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.opening-announcement h2 {
    margin: 0 42px 12px 0;
    color: #792b18;
    font-size: 34px;
    line-height: 1.08;
}

.opening-announcement__lead,
.opening-announcement__message,
.opening-announcement__invite {
    margin: 0;
    color: #634b3e;
    font-size: 14px;
    line-height: 1.65;
}

.opening-announcement__message {
    margin-top: 8px;
}

.opening-announcement__date {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 18px 0;
    padding: 12px 14px;
    color: #6d321e;
    border: 1px solid #efc47e;
    border-radius: 12px;
    background: linear-gradient(105deg, #fff0c8, #fff8e7);
}

.opening-announcement__date > i {
    color: #e36d1c;
    font-size: 25px;
}

.opening-announcement__date div {
    display: flex;
    flex-direction: column;
}

.opening-announcement__date small {
    color: #98715b;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
}

.opening-announcement__date b {
    margin-top: 2px;
    font-size: 17px;
}

.opening-announcement__invite {
    font-size: 13px;
}

.opening-announcement__actions {
    display: grid;
    gap: 8px;
    margin-top: 15px;
}

.opening-announcement__zalo {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 12px;
    padding: 13px 16px;
    color: #fff !important;
    text-decoration: none !important;
    border-radius: 13px;
    background: linear-gradient(115deg, #0878de, #00a3f2);
    box-shadow: 0 10px 22px rgba(0, 116, 207, .25);
    transition: transform .2s ease, box-shadow .2s ease;
}

.opening-announcement__zalo:hover {
    transform: translateY(-2px);
    box-shadow: 0 14px 28px rgba(0, 116, 207, .34);
}

.opening-announcement__zalo > i:first-child {
    font-size: 25px;
}

.opening-announcement__zalo span {
    display: flex;
    flex-direction: column;
}

.opening-announcement__zalo b {
    font-size: 14px;
}

.opening-announcement__zalo small {
    margin-top: 2px;
    color: #dff5ff;
    font-size: 10px;
}

.opening-announcement__later {
    justify-self: center;
    padding: 7px 13px;
    color: #8a6e5e;
    font-size: 11px;
    border: 0;
    background: transparent;
    cursor: pointer;
}

.opening-announcement__later:hover {
    color: #b74a1a;
    text-decoration: underline;
}

@media (max-width: 680px) {
    .opening-announcement { padding: 13px; }
    .opening-announcement__dialog { display: block; max-height: calc(100vh - 26px); border-radius: 17px; }
    .opening-announcement__visual { min-height: 105px; }
    .opening-announcement__visual::before { width: 190px; height: 190px; }
    .opening-announcement__visual::after { width: 120px; height: 120px; }
    .opening-announcement__dragon-ball { width: 72px; height: 72px; font-size: 35px; border-width: 3px; }
    .opening-announcement__dragon-ball::after { bottom: 10px; font-size: 7px; }
    .opening-announcement__content { padding: 24px 20px 21px; }
    .opening-announcement__eyebrow { font-size: 9px; }
    .opening-announcement h2 { margin-right: 30px; font-size: 25px; }
    .opening-announcement__lead, .opening-announcement__message { font-size: 12px; line-height: 1.58; }
    .opening-announcement__date { margin: 14px 0; padding: 10px 12px; }
    .opening-announcement__date b { font-size: 14px; }
    .opening-announcement__invite { font-size: 11px; }
    .opening-announcement__zalo { padding: 11px 12px; }
    .opening-announcement__zalo b { font-size: 12px; }
}

@media (prefers-reduced-motion: reduce) {
    .opening-announcement,
    .opening-announcement__dialog,
    .opening-announcement__zalo {
        transition: none;
    }
}