/* ==========================================================================
 * app-splash.css - Man hinh khoi dong (splash) cua he thong
 *
 * DUNG CHUNG cho ca 3 site: Hoc vien, Giang vien, Trung tam dieu hanh.
 * Ba ban file nay PHAI giong nhau tung ky tu - sua mot ban thi copy sang hai
 * ban con lai (xem huong dan o dau app-splash.js).
 *
 * Nguyen tac:
 *  - KHONG dung Tailwind, KHONG dung Bootstrap: splash phai ve duoc o moi site
 *    va khong bat site Hoc vien chay lai `npm run build:css` moi lan sua.
 *  - Moi selector deu mo dau bang #app-splash: mot id + mot class du de thang
 *    CSS cua bo giao dien (app.min.css, eduhub-tailwind.css) ma khong can !important.
 *  - Thuong hieu (logo / ten don vi / mo ta) do app-splash.js do vao luc chay,
 *    o day chi la khung. KHONG hardcode ten don vi nao trong file nay.
 *  - Mau nhan dien lay qua bien --apspl-accent*, site nao muon doi thi khai o
 *    AppSplashConfig.theme (xem app-splash.js).
 * ========================================================================== */

/* Chan cuon trang trong luc splash con hien. JS tu bo class nay khi an splash. */
html.apspl-locked,
html.apspl-locked body {
    overflow: hidden !important;
}

#app-splash {
    /* --- Bang mau: trang + xanh nhat --- */
    --apspl-accent: #2563eb;
    --apspl-accent-2: #60a5fa;
    --apspl-accent-3: #93c5fd;
    --apspl-ink: #0f172a;
    --apspl-muted: #64748b;
    --apspl-track: #dde8fa;

    position: fixed;
    inset: 0;
    z-index: 2147483000; /* tren moi modal / toast cua bo giao dien */
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    overflow: hidden;
    isolation: isolate;
    background:
        radial-gradient(120% 95% at 50% -12%, #ffffff 0%, #f8fbff 34%, #eff5ff 66%, #e6efff 100%);
    color: var(--apspl-ink);
    font-family: 'Inter', 'Roboto', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
    -webkit-font-smoothing: antialiased;
    opacity: 1;
    transition: opacity .45s ease, transform .45s ease;
}

/* Trang thai an di - JS gan class nay roi xoa han node sau khi transition xong */
#app-splash.apspl-done {
    opacity: 0;
    transform: scale(1.015);
    pointer-events: none;
}

/* --------------------------------------------------------------------------
 * 1. Nen: cac vung sang xanh mo (blur glow) + song mem o day trang
 * ------------------------------------------------------------------------ */
#app-splash .apspl-bg {
    position: absolute;
    inset: -10%;
    pointer-events: none;
    background:
        radial-gradient(38% 42% at 15% 16%, rgba(96, 165, 250, .46), rgba(96, 165, 250, 0) 68%),
        radial-gradient(36% 42% at 85% 20%, rgba(96, 165, 250, .42), rgba(96, 165, 250, 0) 70%),
        radial-gradient(42% 46% at 72% 86%, rgba(37, 99, 235, .24), rgba(37, 99, 235, 0) 72%),
        radial-gradient(32% 36% at 26% 84%, rgba(125, 211, 252, .30), rgba(125, 211, 252, 0) 70%);
    filter: blur(28px);
    animation: apspl-drift 22s ease-in-out infinite alternate;
}

/* Song o day trang: 4 lop path trong MOT anh SVG, truot ngang rat cham */
#app-splash .apspl-waves {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: min(38vh, 320px);
    pointer-events: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 320' preserveAspectRatio='none'%3E%3Cpath fill='%23dbeafe' fill-opacity='.92' d='M0 150 C 180 96 380 208 620 176 C 880 140 1160 68 1440 118 L1440 320 L0 320 Z'/%3E%3Cpath fill='%23bfdbfe' fill-opacity='.85' d='M0 206 C 220 150 430 250 690 224 C 950 198 1200 132 1440 178 L1440 320 L0 320 Z'/%3E%3Cpath fill='%2360a5fa' fill-opacity='.32' d='M0 252 C 250 208 520 288 790 262 C 1040 238 1250 196 1440 240 L1440 320 L0 320 Z'/%3E%3Cpath fill='%23ffffff' fill-opacity='.74' d='M0 284 C 260 250 540 306 820 288 C 1080 271 1260 244 1440 276 L1440 320 L0 320 Z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: 0 bottom;
    background-size: 160% 100%;
    animation: apspl-wave 34s linear infinite alternate;
}

/* --------------------------------------------------------------------------
 * 2. Bong bong kinh tha noi quanh man hinh (glassmorphism)
 * ------------------------------------------------------------------------ */
#app-splash .apspl-bubbles {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

#app-splash .apspl-bubble {
    position: absolute;
    display: grid;
    place-items: center;
    width: var(--apspl-size, 64px);
    height: var(--apspl-size, 64px);
    border-radius: 50%;
    background: linear-gradient(150deg, rgba(255, 255, 255, .92), rgba(255, 255, 255, .48));
    border: 1px solid rgba(255, 255, 255, .9);
    box-shadow:
        0 18px 38px -18px rgba(37, 99, 235, .45),
        0 2px 6px rgba(15, 23, 42, .04),
        inset 0 1px 1px rgba(255, 255, 255, .9);
    -webkit-backdrop-filter: blur(10px) saturate(150%);
    backdrop-filter: blur(10px) saturate(150%);
    opacity: 0;
    will-change: transform;
    animation:
        apspl-fade .9s ease-out var(--apspl-in, .25s) both,
        apspl-float var(--apspl-dur, 7s) ease-in-out var(--apspl-delay, 0s) infinite;
}

/* Vien sang mo ben ngoai, cho bong bong co do sau */
#app-splash .apspl-bubble::after {
    content: "";
    position: absolute;
    inset: -6px;
    border-radius: 50%;
    border: 1px solid rgba(147, 197, 253, .35);
    opacity: .7;
}

#app-splash .apspl-ico {
    display: block;
    width: 46%;
    height: 46%;
    background-color: var(--apspl-accent);
    opacity: .82;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: contain;
    mask-size: contain;
}

/* Bo icon giao duc / cong dong (Lucide) - ve bang mask nen doi mau duoc */
#app-splash .apspl-ico-cap {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21.42 10.92a1 1 0 0 0-.02-1.84L12.83 5.18a2 2 0 0 0-1.66 0L2.6 9.08a1 1 0 0 0 0 1.83l8.57 3.91a2 2 0 0 0 1.66 0z'/%3E%3Cpath d='M22 10v6'/%3E%3Cpath d='M6 12.5V16a6 3 0 0 0 12 0v-3.5'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21.42 10.92a1 1 0 0 0-.02-1.84L12.83 5.18a2 2 0 0 0-1.66 0L2.6 9.08a1 1 0 0 0 0 1.83l8.57 3.91a2 2 0 0 0 1.66 0z'/%3E%3Cpath d='M22 10v6'/%3E%3Cpath d='M6 12.5V16a6 3 0 0 0 12 0v-3.5'/%3E%3C/svg%3E");
}

#app-splash .apspl-ico-bulb {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 14c.2-1 .7-1.7 1.5-2.5 1-.9 1.5-2.2 1.5-3.5a6 6 0 0 0-12 0c0 1 .2 2.2 1.5 3.5.7.7 1.3 1.5 1.5 2.5'/%3E%3Cpath d='M9 18h6'/%3E%3Cpath d='M10 22h4'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 14c.2-1 .7-1.7 1.5-2.5 1-.9 1.5-2.2 1.5-3.5a6 6 0 0 0-12 0c0 1 .2 2.2 1.5 3.5.7.7 1.3 1.5 1.5 2.5'/%3E%3Cpath d='M9 18h6'/%3E%3Cpath d='M10 22h4'/%3E%3C/svg%3E");
}

#app-splash .apspl-ico-book {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 7v14'/%3E%3Cpath d='M3 18a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1h5a4 4 0 0 1 4 4 4 4 0 0 1 4-4h5a1 1 0 0 1 1 1v13a1 1 0 0 1-1 1h-6a3 3 0 0 0-3 3 3 3 0 0 0-3-3z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 7v14'/%3E%3Cpath d='M3 18a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1h5a4 4 0 0 1 4 4 4 4 0 0 1 4-4h5a1 1 0 0 1 1 1v13a1 1 0 0 1-1 1h-6a3 3 0 0 0-3 3 3 3 0 0 0-3-3z'/%3E%3C/svg%3E");
}

#app-splash .apspl-ico-users {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='9' cy='7' r='4'/%3E%3Cpath d='M22 21v-2a4 4 0 0 0-3-3.87'/%3E%3Cpath d='M16 3.13a4 4 0 0 1 0 7.75'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='9' cy='7' r='4'/%3E%3Cpath d='M22 21v-2a4 4 0 0 0-3-3.87'/%3E%3Cpath d='M16 3.13a4 4 0 0 1 0 7.75'/%3E%3C/svg%3E");
}

#app-splash .apspl-ico-chat {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7.9 20A9 9 0 1 0 4 16.1L2 22z'/%3E%3Cpath d='M8 12h.01'/%3E%3Cpath d='M12 12h.01'/%3E%3Cpath d='M16 12h.01'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7.9 20A9 9 0 1 0 4 16.1L2 22z'/%3E%3Cpath d='M8 12h.01'/%3E%3Cpath d='M12 12h.01'/%3E%3Cpath d='M16 12h.01'/%3E%3C/svg%3E");
}

#app-splash .apspl-ico-game {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 11h4'/%3E%3Cpath d='M8 9v4'/%3E%3Cpath d='M15 12h.01'/%3E%3Cpath d='M18 10h.01'/%3E%3Cpath d='M17.32 5H6.68a4 4 0 0 0-3.98 3.59c-.08.67-.7 5.71-.7 7.41a3 3 0 0 0 3 3c1 0 1.5-.5 2-1l1.41-1.41A2 2 0 0 1 9.83 16h4.34a2 2 0 0 1 1.42.59L17 18c.5.5 1 1 2 1a3 3 0 0 0 3-3c0-1.7-.62-6.74-.7-7.41A4 4 0 0 0 17.32 5z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 11h4'/%3E%3Cpath d='M8 9v4'/%3E%3Cpath d='M15 12h.01'/%3E%3Cpath d='M18 10h.01'/%3E%3Cpath d='M17.32 5H6.68a4 4 0 0 0-3.98 3.59c-.08.67-.7 5.71-.7 7.41a3 3 0 0 0 3 3c1 0 1.5-.5 2-1l1.41-1.41A2 2 0 0 1 9.83 16h4.34a2 2 0 0 1 1.42.59L17 18c.5.5 1 1 2 1a3 3 0 0 0 3-3c0-1.7-.62-6.74-.7-7.41A4 4 0 0 0 17.32 5z'/%3E%3C/svg%3E");
}

/* Vi tri 6 bong bong: mot vanh can doi quanh man hinh, deu tranh xa vung giua.
   4 goc + 2 ben - khong de hai bong bong nao dinh nhau, nhin moi ra co chu y. */
#app-splash .apspl-b1 { --apspl-size: 76px; --apspl-dur: 7.5s; --apspl-in: .30s; top: 14%; left: 10%; }
#app-splash .apspl-b2 { --apspl-size: 64px; --apspl-dur: 6.4s; --apspl-delay: .8s; --apspl-in: .42s; top: 16%; right: 11%; }
#app-splash .apspl-b3 { --apspl-size: 68px; --apspl-dur: 8.2s; --apspl-delay: 1.4s; --apspl-in: .54s; bottom: 21%; left: 13%; }
#app-splash .apspl-b4 { --apspl-size: 72px; --apspl-dur: 7.1s; --apspl-delay: .4s; --apspl-in: .66s; bottom: 23%; right: 12%; }
#app-splash .apspl-b5 { --apspl-size: 52px; --apspl-dur: 9.0s; --apspl-delay: 1.9s; --apspl-in: .78s; top: 47%; left: 4.5%; }
#app-splash .apspl-b6 { --apspl-size: 54px; --apspl-dur: 6.9s; --apspl-delay: 1.1s; --apspl-in: .90s; top: 51%; right: 4.5%; }

/* --------------------------------------------------------------------------
 * 3. Khoi trung tam: logo - ten don vi - mo ta - thanh tien do
 * ------------------------------------------------------------------------ */
#app-splash .apspl-panel {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 560px;
    text-align: center;
}

/* Quang sang mem phia sau khoi chu, de tach noi dung khoi nen */
#app-splash .apspl-panel::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 168%;
    padding-bottom: 168%;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 255, 255, .92) 0%, rgba(255, 255, 255, .55) 42%, rgba(255, 255, 255, 0) 70%);
    pointer-events: none;
    z-index: -1;
}

#app-splash .apspl-logo {
    position: relative;
    width: 104px;
    height: 104px;
    margin: 0 auto;
    display: grid;
    place-items: center;
    border-radius: 28px;
    background: #fff;
    border: 1px solid rgba(219, 232, 252, .95);
    box-shadow:
        0 26px 56px -18px rgba(37, 99, 235, .38),
        0 6px 16px -6px rgba(15, 23, 42, .10),
        0 0 0 6px rgba(255, 255, 255, .75);
    animation: apspl-pop .8s cubic-bezier(.21, 1.02, .34, 1) both;
}

/* Vong sang thoi nhe quanh khung logo.
   Tam gradient de TRONG (0% den 42%): khung logo dang chay animation transform nen no
   la mot stacking context - ::after voi z-index -1 chi xuong duoi duoc phan noi dung,
   KHONG xuong duoi duoc mau nen trang cua chinh khung. To mau o giua thi o logo bi phu
   mot lop xanh. Vay chi to phan trum ra ngoai khung. */
#app-splash .apspl-logo::after {
    content: "";
    position: absolute;
    inset: -34px;      /* rong de quang sang tat han TRUOC vien hop */
    border-radius: 50%;
    /* Mau phai ve 0 truoc 70% ban kinh gradient (= nua chieu hop): tran ra ngoai hop
       la bi border-radius cat ngang, thanh mot duong vien xanh sac net nhu outline. */
    background: radial-gradient(circle at 50% 50%,
        rgba(96, 165, 250, 0) 44%,
        rgba(96, 165, 250, .26) 56%,
        rgba(96, 165, 250, 0) 70%);
    animation: apspl-breath 3.6s ease-in-out infinite;
    pointer-events: none;
    z-index: -1;
}

/* Cho luc chua co logo cua don vi: mot dau hieu mo, khong phai o trong.
   PHAI tu can giua bang left/top/transform: khung logo la grid nhung ::before lai
   position absolute nen no khong an theo place-items cua grid. */
#app-splash .apspl-logo::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 46%;
    height: 46%;
    background-color: var(--apspl-accent-3);
    opacity: .45;
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21.42 10.92a1 1 0 0 0-.02-1.84L12.83 5.18a2 2 0 0 0-1.66 0L2.6 9.08a1 1 0 0 0 0 1.83l8.57 3.91a2 2 0 0 0 1.66 0z'/%3E%3Cpath d='M22 10v6'/%3E%3Cpath d='M6 12.5V16a6 3 0 0 0 12 0v-3.5'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21.42 10.92a1 1 0 0 0-.02-1.84L12.83 5.18a2 2 0 0 0-1.66 0L2.6 9.08a1 1 0 0 0 0 1.83l8.57 3.91a2 2 0 0 0 1.66 0z'/%3E%3Cpath d='M22 10v6'/%3E%3Cpath d='M6 12.5V16a6 3 0 0 0 12 0v-3.5'/%3E%3C/svg%3E");
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    mask-size: contain;
    transition: opacity .3s ease;
}

#app-splash .apspl-logo img {
    max-width: 72%;
    max-height: 72%;
    width: auto;
    height: auto;
    object-fit: contain;
    opacity: 0;
    transition: opacity .35s ease;
}

/* apspl-ready: anh logo cua don vi da tai xong -> hien anh, tat dau hieu tam */
#app-splash .apspl-logo.apspl-ready img { opacity: 1; }
#app-splash .apspl-logo.apspl-ready::before { opacity: 0; }

#app-splash .apspl-name {
    margin: 26px 0 0;
    padding: 0;
    font-size: clamp(26px, 3.3vw, 42px);
    font-weight: 800;
    line-height: 1.18;
    letter-spacing: -.02em;
    color: var(--apspl-ink);
    animation: apspl-up .7s cubic-bezier(.2, .7, .2, 1) .12s both;
}

#app-splash .apspl-sub {
    margin: 10px auto 0;
    padding: 0;
    max-width: 26em;
    font-size: clamp(14px, 1.15vw, 17px);
    font-weight: 500;
    line-height: 1.55;
    color: var(--apspl-muted);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    animation: apspl-up .7s cubic-bezier(.2, .7, .2, 1) .2s both;
}

/* Chua do duoc thuong hieu: hien vach cho lap lanh, khong hien chu tam */
#app-splash .apspl-name:empty::after,
#app-splash .apspl-sub:empty::after {
    content: "";
    display: block;
    margin: 0 auto;
    height: .78em;
    border-radius: 8px;
    background: linear-gradient(90deg, #e6eefb 0%, #f5f9ff 50%, #e6eefb 100%);
    background-size: 220% 100%;
    animation: apspl-shimmer 1.5s linear infinite;
}

#app-splash .apspl-name:empty::after { width: clamp(190px, 24vw, 300px); }
#app-splash .apspl-sub:empty::after { width: clamp(130px, 16vw, 210px); }

/* .apspl-sub binh thuong la -webkit-box (de cat 2 dong). Luc con trong phai tra ve
   block, khong thi vach cho khong an margin auto va bi day sang le trai. */
#app-splash .apspl-sub:empty { display: block; }

/* --- Thanh tien do --- */
#app-splash .apspl-progress {
    margin: 34px auto 0;
    width: min(360px, 78vw);
    animation: apspl-up .7s cubic-bezier(.2, .7, .2, 1) .28s both;
}

#app-splash .apspl-bar {
    position: relative;
    height: 7px;
    border-radius: 999px;
    background: var(--apspl-track);
    overflow: hidden;
    box-shadow: inset 0 1px 2px rgba(15, 23, 42, .06);
}

#app-splash .apspl-fill {
    position: relative;
    display: block;
    height: 100%;
    width: 10%; /* Moc khoi dau: 10% - JS cap nhat dan len 100% */
    border-radius: 999px;
    background: linear-gradient(90deg, var(--apspl-accent) 0%, var(--apspl-accent-2) 100%);
    box-shadow: 0 0 12px rgba(37, 99, 235, .45);
    transition: width .5s cubic-bezier(.35, 0, .25, 1);
}

/* Vet sang chay tren thanh tien do */
#app-splash .apspl-fill::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 999px;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, .55) 50%, rgba(255, 255, 255, 0) 100%);
    background-size: 45% 100%;
    background-repeat: no-repeat;
    animation: apspl-sheen 1.7s ease-in-out infinite;
}

#app-splash .apspl-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 12px;
    font-size: 13px;
    line-height: 1.4;
}

#app-splash .apspl-status {
    color: var(--apspl-muted);
    font-weight: 500;
}

#app-splash .apspl-percent {
    color: var(--apspl-accent);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum";
}

/* --------------------------------------------------------------------------
 * 4. Chuyen dong
 * ------------------------------------------------------------------------ */
@keyframes apspl-drift {
    0%   { transform: translate3d(0, 0, 0) scale(1); }
    100% { transform: translate3d(-2.5%, 2%, 0) scale(1.06); }
}

@keyframes apspl-wave {
    0%   { background-position: 0 bottom; }
    100% { background-position: 100% bottom; }
}

@keyframes apspl-float {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-15px); }
}

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

@keyframes apspl-pop {
    from { opacity: 0; transform: translateY(10px) scale(.9); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes apspl-up {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: translateY(0); }
}

@keyframes apspl-breath {
    0%, 100% { opacity: .55; transform: scale(.96); }
    50%      { opacity: 1; transform: scale(1.06); }
}

@keyframes apspl-shimmer {
    from { background-position: 120% 0; }
    to   { background-position: -120% 0; }
}

@keyframes apspl-sheen {
    0%   { background-position: -60% 0; }
    100% { background-position: 160% 0; }
}

/* --------------------------------------------------------------------------
 * 5. Man hinh nho: bo dan bong bong, giu vung giua thoang
 * ------------------------------------------------------------------------ */
@media (max-width: 1180px) {
    #app-splash .apspl-b1 { left: 5%; }
    #app-splash .apspl-b2 { right: 6%; }
    #app-splash .apspl-b3 { left: 7%; }
    #app-splash .apspl-b4 { right: 8%; }
    #app-splash .apspl-b5,
    #app-splash .apspl-b6 { display: none; }
}

@media (max-width: 860px) {
    #app-splash .apspl-b1 { --apspl-size: 60px; top: 10%; left: 6%; }
    #app-splash .apspl-b2 { --apspl-size: 52px; top: 17%; right: 7%; }
    #app-splash .apspl-b3 { --apspl-size: 54px; bottom: 20%; left: 8%; }
    #app-splash .apspl-b4 { --apspl-size: 56px; bottom: 14%; right: 9%; }
}

@media (max-width: 560px) {
    #app-splash { padding: 20px; }
    #app-splash .apspl-bubbles { display: none; }
    #app-splash .apspl-logo { width: 88px; height: 88px; border-radius: 24px; }
    #app-splash .apspl-name { margin-top: 22px; }
    #app-splash .apspl-progress { margin-top: 28px; }
}

/* Man hinh rat thap: laptop nho, hoac dien thoai nam ngang */
@media (max-height: 520px) {
    #app-splash .apspl-logo { width: 76px; height: 76px; border-radius: 22px; }
    #app-splash .apspl-name { margin-top: 16px; font-size: clamp(22px, 2.6vw, 30px); }
    #app-splash .apspl-progress { margin-top: 20px; }
    #app-splash .apspl-waves { height: 30vh; }
}

/* --------------------------------------------------------------------------
 * 6. Ton trong lua chon giam chuyen dong cua nguoi dung
 * ------------------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
    #app-splash .apspl-bg,
    #app-splash .apspl-waves,
    #app-splash .apspl-bubble,
    #app-splash .apspl-logo,
    #app-splash .apspl-logo::after,
    #app-splash .apspl-name,
    #app-splash .apspl-sub,
    #app-splash .apspl-progress,
    #app-splash .apspl-fill::after,
    #app-splash .apspl-name:empty::after,
    #app-splash .apspl-sub:empty::after {
        animation: none !important;
    }

    #app-splash .apspl-bubble { opacity: 1; }

    #app-splash .apspl-fill,
    #app-splash .apspl-logo img,
    #app-splash .apspl-logo::before {
        transition: none;
    }
}