/*
 * Popup banner trang chu (home-popup / home-popup-iframe / main-popup).
 * Dung chung cho ca 3 cay view: frontend/ (desktop), mobile/, tablet/.
 * Markup do app/views/_shared/chiaki-popup-assets.php mo ta.
 *
 * File nay KHONG di qua gulp/PurgeCSS (giong cac file khac trong public/styles),
 * nen sua truc tiep o day, khong can build lai.
 */

#ChiakiPopupWapper {
    /*
     * Co bat tay voi chiaki-popup.js: JS chi cho popup hien khi doc duoc bien nay,
     * tuc la file CSS nay that su da ap dung. KHONG XOA.
     * Khong dung duoc position/z-index lam dau hieu vi CSS popup CU van con nam trong
     * cac bundle (home.min.css, chiaki.frontend-style.min.css) va cung dat position:fixed.
     */
    --chiaki-popup-css: 1;
    position: fixed;
    top: 0; right: 0; bottom: 0; left: 0;
    width: 100%; height: 100%;
    margin: 0; padding: 0;
    box-sizing: border-box;
    background: rgba(17, 17, 17, .66);
    z-index: 100000;
    opacity: 0;
    transition: opacity .22s ease;
    -webkit-tap-highlight-color: transparent;
}
#ChiakiPopupWapper.is-open { opacity: 1; }

/* lop nen phu kin man hinh, nam duoi noi dung - bam vao day la dong popup */
#ChiakiPopupWapper .ChiakiPopupBackground {
    position: absolute;
    top: 0; right: 0; bottom: 0; left: 0;
    width: 100%; height: 100%;
    z-index: 0;
    background-size: cover;
}

/*
 * Can giua: khung trai het be ngang roi day noi dung ve giua bang text-align, con
 * chieu doc dung top:50% + translateY(-50%).
 * KHONG dat left:50% cho khung nay: voi mot the position:absolute chi co `left`,
 * be rong kha dung chi con tinh tu `left` toi mep phai => khung co lai con mot nua
 * man hinh va anh bi thu nho.
 */
#ChiakiPopupWapper .ChiakiPopupContent {
    position: absolute;
    z-index: 1;
    top: 50%; left: 0; right: 0;
    width: auto; height: auto;
    max-width: none; max-height: none;
    margin: 0;
    padding: 0 16px;
    box-sizing: border-box;
    overflow: visible;
    text-align: center;
    line-height: 0;
    opacity: 0;
    -webkit-transform: translateY(-50%) scale(.96);
    transform: translateY(-50%) scale(.96);
    -webkit-transition: opacity .22s ease, -webkit-transform .22s ease;
    transition: opacity .22s ease, transform .22s ease;
}
#ChiakiPopupWapper.is-open .ChiakiPopupContent {
    opacity: 1;
    -webkit-transform: translateY(-50%) scale(1);
    transform: translateY(-50%) scale(1);
}

/* khung om sat lay anh, de nut dong bam dung goc anh chu khong bay ra mep man hinh */
#ChiakiPopupWapper .ChiakiPopupBox {
    display: inline-block;
    position: relative;
    max-width: 100%;
    margin: 0;
    line-height: 0;
    vertical-align: top;
}

/*
 * Reset manh tay: CSS chung cua site dang gan `padding: 15px` cho the <a> trong
 * vung nay, an mat 30px be ngang cua anh popup. Cac thuoc tinh duoi day phai
 * ghi de het de khung om sat dung bang anh.
 */
#ChiakiPopupWapper .ChiakiPopupBox .gotoLink {
    display: block;
    position: static;
    top: auto; left: auto;
    width: auto; height: auto;
    max-width: none;
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
    line-height: 0;
    -webkit-transform: none;
    transform: none;
}

#ChiakiPopupWapper .ChiakiPopupBox img {
    display: block;
    width: auto; height: auto;
    max-width: 100%;
    max-height: 84vh;
    margin: 0;
    border-radius: 14px;
    box-shadow: 0 18px 50px rgba(0, 0, 0, .45);
}

/* ban iframe khong tu co lai duoc nen phai cho kich thuoc ro rang */
#ChiakiPopupWapper .ChiakiPopupBox.is-iframe {
    display: block;
    width: 100%; height: 84vh;
    max-width: 600px;
    margin: 0 auto;
    line-height: normal;
}
#ChiakiPopupWapper .ChiakiPopupBox.is-iframe iframe {
    display: block;
    width: 100%; height: 100%;
    border: 0;
    border-radius: 14px;
    background: #fff;
}

#ChiakiPopupWapper .ChiakiPopupClose {
    position: absolute;
    z-index: 2;
    top: 8px; right: 8px;
    width: 34px; height: 34px;
    padding: 0; margin: 0;
    display: -webkit-box; display: -ms-flexbox; display: flex;
    -webkit-box-align: center; -ms-flex-align: center; align-items: center;
    -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center;
    border: 0;
    border-radius: 50%;
    background: rgba(0, 0, 0, .42);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    color: #fff;
    line-height: 0;
    opacity: .92;
    cursor: pointer;
    -webkit-transition: background .18s ease, opacity .18s ease, -webkit-transform .18s ease;
    transition: background .18s ease, opacity .18s ease, transform .18s ease;
}
/* noi rong vung cham cho ngon tay ma khong lam to nut */
#ChiakiPopupWapper .ChiakiPopupClose:before {
    content: "";
    position: absolute;
    top: -9px; right: -9px; bottom: -9px; left: -9px;
}
#ChiakiPopupWapper .ChiakiPopupClose:hover { background: rgba(0, 0, 0, .68); opacity: 1; -webkit-transform: scale(1.06); transform: scale(1.06); }
#ChiakiPopupWapper .ChiakiPopupClose:active { -webkit-transform: scale(.94); transform: scale(.94); }
#ChiakiPopupWapper .ChiakiPopupClose:focus { outline: 0; }
#ChiakiPopupWapper .ChiakiPopupClose:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
#ChiakiPopupWapper .ChiakiPopupClose svg {
    display: block;
    width: 16px; height: 16px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.2;
    stroke-linecap: round;
}

@media (min-width: 768px) {
    #ChiakiPopupWapper .ChiakiPopupBox { max-width: 600px; }
    #ChiakiPopupWapper .ChiakiPopupClose { top: 10px; right: 10px; }
}

@media (prefers-reduced-motion: reduce) {
    #ChiakiPopupWapper,
    #ChiakiPopupWapper .ChiakiPopupContent,
    #ChiakiPopupWapper .ChiakiPopupClose {
        -webkit-transition: none;
        transition: none;
    }
}