/*
 * Thong bao he thong.
 *
 * Mau sac KHONG nam trong file nay - chung do admin dat cho tung thong bao va
 * duoc in thang vao thuoc tinh style (da qua NoticeService::mauAnToan, chi
 * nhan dang #rgb/#rrggbb). O day chi lo bo cuc, khoang cach va hieu ung.
 *
 * HAI CHE DO DAT:
 *   .tt-notice-flow   trang chu - nam trong dong chay, day noi dung xuong
 *   .tt-notice-float  trang khac - noi len tren, tu tat sau vai giay
 *
 * Vi sao khong dung mot che do cho ca hai: cac thanh dau cua ban mobile
 * (top2/top3) deu position:fixed voi do lech viet cung bang pixel. Mot khoi
 * them vao dong chay o do se nam khuat ben duoi; con day thanh dau xuong thi
 * phai sua tung con so mot o nhieu file CSS khac.
 */

.tt-notice-wrap {
    box-sizing: border-box;
    width: 100%;
}

.tt-notice-flow {
    position: relative;
}

/* z-index 9999: phai nam tren .header cua ban PC (z-index 10) va tren cac
   thanh dau cua ban mobile. Day la mot thanh tu tat, khong phai mot lop phu
   vinh vien. */
.tt-notice-float {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 9999;
}

.tt-notice {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    border-left: 4px solid transparent;
    font-size: 14px;
    line-height: 1.5;
}

.tt-notice + .tt-notice {
    border-top: 1px solid rgba(0, 0, 0, .06);
}

.tt-notice-icon {
    flex: 0 0 auto;
    font-size: 18px;
    line-height: 1;
}

/* min-width:0 la thu cho phep con chu ben trong duoc xuong dong / cat bot.
   Mot flex item mac dinh khong co xuong duoi kich thuoc noi dung cua no, nen
   thieu dong nay thi mot tua de dai se noi rong ca thanh. */
.tt-notice-body {
    flex: 1 1 auto;
    min-width: 0;
}

.tt-notice-title {
    display: block;
    font-weight: 700;
}

.tt-notice-text {
    word-wrap: break-word;
}

/* Mau chu cua lien ket trong noi dung KHONG dat cung: no ke thua mau chu cua
   ca thanh, ma mau do do admin chon. Dat cung mot mau xanh se chim mat tren
   mot thanh nen toi. */
.tt-notice-text a {
    color: inherit;
    text-decoration: underline;
}

.tt-notice-btn {
    flex: 0 0 auto;
    padding: 6px 14px;
    border-radius: 4px;
    color: #fff;
    font-size: 13px;
    text-decoration: none;
    white-space: nowrap;
}

.tt-notice-btn:hover {
    opacity: .88;
    color: #fff;
}

.tt-notice-x {
    flex: 0 0 auto;
    width: 28px;
    height: 28px;
    padding: 0;
    border: 0;
    background: transparent;
    color: inherit;
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    opacity: .55;
}

.tt-notice-x:hover {
    opacity: 1;
}

/* --- Kieu hien ---------------------------------------------------------- */

/* card: mot khoi co bo goc, tach khoi mep trang */
.tt-notice--card {
    margin: 10px auto;
    max-width: 1200px;
    border-radius: 6px;
    border-left-width: 4px;
}

/* modal: dat giua man hinh, co lop phu mo phia sau */
.tt-notice--modal {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 10000;
    width: calc(100% - 40px);
    max-width: 460px;
    display: block;
    padding: 22px;
    border-radius: 8px;
    border-left: 0;
    box-shadow: 0 10px 40px rgba(0, 0, 0, .3);
    text-align: center;
}

.tt-notice--modal .tt-notice-btn {
    display: inline-block;
    margin-top: 14px;
}

.tt-notice--modal .tt-notice-x {
    position: absolute;
    top: 6px;
    right: 8px;
}

.tt-notice-mask {
    position: fixed;
    inset: 0;
    z-index: 9998;
    background: rgba(0, 0, 0, .45);
}

/* --- Hieu ung ----------------------------------------------------------- */

/* prefers-reduced-motion: khong phai tieu chuan trang tri. Hieu ung nhap nhay
   lap lai co the gay kho chiu that voi mot so nguoi doc, va he dieu hanh da
   co san cong tac de ho noi dieu do. */
@media (prefers-reduced-motion: no-preference) {
    .tt-fx-fade {
        animation: tt-notice-fade .45s ease-out;
    }

    .tt-fx-slide {
        animation: tt-notice-slide .35s ease-out;
    }

    .tt-fx-pulse {
        animation: tt-notice-pulse 1.8s ease-in-out infinite;
    }
}

@keyframes tt-notice-fade {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@keyframes tt-notice-slide {
    from { transform: translateY(-100%); }
    to   { transform: translateY(0); }
}

@keyframes tt-notice-pulse {
    0%, 100% { filter: brightness(1); }
    50%      { filter: brightness(1.12); }
}

/* Dang tat - JS gan class nay roi moi go phan tu, de hieu ung kip chay. */
.tt-notice.is-closing {
    opacity: 0;
    transition: opacity .25s ease-out;
}

/* --- Man hinh hep ------------------------------------------------------- */

@media (max-width: 640px) {
    .tt-notice {
        flex-wrap: wrap;
        padding: 8px 10px;
        font-size: 13px;
    }

    /* Nut xuong hang rieng: tren man hinh hep, mot nut nam cung hang voi chu
       se ep phan chu con vai tu moi dong. */
    .tt-notice-btn {
        order: 3;
        width: 100%;
        margin-top: 6px;
        text-align: center;
    }

    .tt-notice--card {
        margin: 8px 10px;
    }
}